React JS选择-菜单默认值

Question

下面是我的简单选择菜单组件。

问题是:如何将第一个item.id (来自json响应)设置为生成的select-menu的默认值？

代码：

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：

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

Answer 1

您可以在select标签上设置value属性(在本例中，此属性的值应设置为第一个项目的id )：

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

您可以查看React docs了解更多详细信息。