React JS 选择菜单默认值答案

【问题标题】：React JS select-menu default valueReact JS 选择菜单默认值
【发布时间】：2016-07-07 06:46:51
【问题描述】：

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

问题是：如何将第一个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'}]

【问题讨论】：

标签： javascript json reactjs

【解决方案1】：

您可以在选择标签上设置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了解更多详情。

【讨论】：