React JS select-menu varsayılan değeri

Question

İşte basit seçim menüsü bileşenim.

Soru: Oluşturulan seçme menüsü için varsayılan değer olarak ilk item.id (json yanıtından) nasıl ayarlanır?

Kodu:

import React from 'react' 
import axios from 'axios' 

const Handler = React.createClass({ 

    loadFromServer : function() { 
     axios({ 
      method: 'get', 
      url: '/api_url' 
     }) 
     .then(function(response) { 
      this.setState({data: response.data}); 
     }.bind(this)) 
     .catch(function(response) { 
      this.setState({error: true}) 
     }.bind(this)); 
    }, 

    getInitialState() { 
     return { 
      data: [] 
     } 
    }, 

    componentDidMount: function() { 
     this.loadFromServer(); 
     }, 

    render() { 
    var {data} = this.state; 
    return (
     <select ref="select" id="select"> 
      {data.map((item, i) => { 
       return <option value={item.id} key={i}>{item.name}</option> 
      })} 
     </select> 
    ) 
    } 
}); 

export default Handler 

JSON: ayarlayabilirsiniz

[{id: 'item_id', name: 'item_name'},{id: 'item_id_2', name: 'item_name_2'}] 

Answer 1

value niteliğini seçme etiketinde (sizin durumunuzda Bu özelliğin değeri ilk öğenin id ayarlanması gerekir):

<select ref="select" id="select" value="data[0].id"> 
      {data.map((item, i) => { 
       return <option value={item.id} key={i}>{item.name}</option> 
      })} 
    </select> 

daha fazla detay için React docs kontrol edebilirsiniz.