在<select>菜单的React组件中，我需要在反映应用程序状态的选项上设置所选属性。
在render()中，optionState从状态所有者传递给SortMenu组件。选项值作为道具从JSON传入。
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>
有没有解决这个问题的推荐方法?
React让你更容易做到这一点。而不是在每个选项上定义selected，你可以(也应该)简单地在select标签上写value={optionsState}:
<select value={optionsState}>
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
有关更多信息，请参阅React选择标签文档。
此外，React会自动理解布尔值，所以你可以简单地写(注意:不推荐)
<option value={option.value} selected={optionsState == option.value}>{option.label}</option>
它会适当地输出" selected "
主点控制组件
您希望设置一个“受控组件”。这将要求您在元素上设置值，并处理on change事件以更新值。
https://reactjs.org/docs/forms.html#controlled-components
例子
https://codepen.io/codyswartz/pen/QWqYNrY
简单功能组件选择示例
这还包括一个默认值和灰色。
const defaultSelectValue = "Select a fruit"
const SelectExample = () => {
const [selected, setSelected] = useState(defaultSelectValue)
return (
<>
<label htmlFor="fruits">Fruits</label>{' '}
<select
id="fruits"
name="fruits"
defaultValue={selected}
style={{ color: selected === defaultSelectValue ? "gray" : "black" }}
onChange={e => setSelected(e.target.value)}
>
<option>{defaultSelectValue}</option>
<option>Banana</option>
<option>Apple</option>
<option>Orange</option>
</select>
<h2>Selected: {selected}</h2>
</>
)
}
// Usage
<SelectExample />
带有默认值的动态可重用示例
这将接受一个字符串集合，并将第一个字符串作为默认值。
const SelectExample = ({ name, items }) => {
const defaultSelectValue = items[0]
const [selected, setSelected] = useState(defaultSelectValue)
return (
<>
<label htmlFor={name}>{name}</label>{' '}
<select
id={name}
name={name}
defaultValue={selected}
style={{ color: selected === defaultSelectValue ? "gray" : "black" }}
onChange={e => setSelected(e.target.value)}
>
{items.map(item => (
<option key={item} value={item}>
{item}
</option>
))}
</select>
<h2>Selected: {selected}</h2>
</>
)
}
// Usage
<SelectExample
name="fruits"
items={['Select a fruit', 'Banana', 'Apple', 'Orange']}
/>
