javascript - React JS选择菜单默认值

这是我简单的选择菜单组件。

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

码:

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'}]

最佳答案

您可以在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以获得更多详细信息。