React JSX：在所选的<select>选项上select“selected”
在<select>菜单的React组件中，我需要在反映应用程序状态的选项上设置selected属性。
在render() ， optionState从状态所有者传递给SortMenu组件。 选项值作为JSON的props传入。
render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( <option value={option.value}{selected}>{option.label}</option> ); }); // pass {options} to the select menu jsx
但是，这会触发JSX编译时的语法错误。
这样做摆脱了语法错误，但显然不能解决问题：
var selected = (optionState === option.value) ? 'selected' : 'false'; <option value={option.value} selected={selected}>{option.label}</option>
我也试过这个：
var selected = (optionState === option.value) ? true : false; <option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>
有没有解决这个问题的build议方法？
React自动理解为此目的的布尔值，所以你可以简单地写（注意：不推荐）
<option value={option.value} selected={optionsState == option.value}>{option.label}</option>
它会输出适当的“select”。
但是，React使你更容易。 您可以（也应该）在select标签本身上写下value={optionsState} ，而不是在每个选项上定义selected内容：
<select value={optionsState}> <option value="A">Apple</option> <option value="B">Banana</option> <option value="C">Cranberry</option> </select>
有关详情，请参阅http://facebook.github.io/react/docs/forms.html#why-select-value 。
当您尝试设置<option>的“selected”属性时，您可以执行React提醒您的操作：
使用
<select>上的defaultValue或valueprops，而不是在<option>上<select>设置。
所以，你可以在你的select的defaultValue上使用options.value
这是一个完整的解决scheme，它包含最好的答案和下面的评论（这可能会帮助有人拼命拼凑在一起）：
主要部分：
class ReactMain extends React.Component { constructor() { super(); // bind once here, better than multiple times in render this.handleChange = this.handleChange.bind(this); this.state = { fruit:this.props.item.fruit }; } handleChange(event) { this.setState({[event.target.name]:event.target.value}); } saveItem() { var item = {}; item.fruit = this.state.fruit; ... } render() { ... <ReactExample name="fruit" value={this.state.fruit} onChange={this.handleChange} /> ... } }
包含的组件（现在是无状态的function）：
export const ReactExample = (props) => ( <select name={props.name} value={props.value} onChange={props.handleChange}> <option value="A">Apple</option> <option value="B">Banana</option> <option value="C">Cranberry</option> </select> ... )
主要组件维护水果的选定值（处于状态），包含的组件显示select元素，并且更新被传递回主要组件以更新其状态（然后返回到包含的组件以改变select的值）。
请注意，使用名称prop可以为同一表单上的其他字段声明单个handleChange处理程序，而不pipe其types如何。
当状态改变时， <select>标签没有更新到正确的<option> ，我遇到了一个问题。 我的问题似乎是，如果连续渲染两次，第一次没有预先select<option>但是第二次使用一个，那么<select>标记不会在第二个渲染上更新，而是继续首先默认。
我发现这个使用refs的解决scheme。 您需要获取对<select>标记节点（可能嵌套在某个组件中）的引用，然后在componentDidUpdate挂钩中手动更新它的value属性。
componentDidUpdate(){ let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag); selectNode.value = this.state.someValue; }
***Html:*** <div id="divContainer"></div> var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }]; var selectedColor = 'Green'; ReactDOM.render(<Container></Container>, document.getElementById("divContainer")); var Container = React.createClass({ render: function () { return ( <div> <DropDown data={colors} Selected={selectedColor}></DropDown> </div>); } }); ***Option 1:*** var DropDown = React.createClass( { render: function () { var items = this.props.data; return ( <select value={this.props.Selected}> { items.map(function (item) { return <option value={item.Name }>{item.Name}</option>; }) } </select>); } }); ***Option 2:*** var DropDown = React.createClass( { render: function () { var items = this.props.data; return ( <select> { items.map(function (item) { return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>; }) } </select>); } }); ***Option 3:*** var DropDown = React.createClass( { render: function () { var items = this.props.data; return ( <select> { items.map(function (item) { if (selectedItem == item.Name) return <option value={item.Name } selected>{item.Name}</option>; else return <option value={item.Name }>{item.Name}</option>; }) } </select>); } });
为MULTISELECT / optgroups发布类似的答案：
render() { return( <div> <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }> <option disabled="disabled" value="1" hidden="hidden">-- Select --</option> <optgroup label="Group 1"> {options1} </optgroup> <optgroup label="Group 2"> {options2} </optgroup> </select> </div> ) }
只需添加您的select标签的第一个选项：
<option disabled hidden value=''></option>
这将成为默认，当你select一个有效的选项将被设置在你的状态
