javascript - React JS 选择菜单默认值

Question

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

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

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了解更多详情。