React JSX：在选定的<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>

有解决这个问题的推荐方法吗？

---

为了达到这个目的，React自动理解布尔值，所以你可以简单地写（注意：不推荐）

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

它会适当地输出'selected'。

但是，React使您更容易。 您可以（也应该）在选择标签本身上写下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或value props，而不是在<option>上设置selected 。

所以，你可以在select的defaultValue上使用options.value

---

这是一个完整的解决方案，它包含最佳答案和下面的评论（这可能会帮助有人拼命拼凑在一起）：

主要部分：

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} onChange{this.handleChange} />
    )
  }

}

包含的组件（现在是无状态的功能）：

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元素，更新传回主要组件以更新其状态（然后循环回包含的组件以更改选定值）。

请注意，使用名称prop可以为同一表单上的其他字段声明单个handleChange方法，而不管其类型如何。

链接地址: http://www.djcxy.com/p/52089.html

上一篇: React JSX: selecting "selected" on selected <select> option

下一篇: How do I set an umanaged dialog as the Owner of a WinForm Form?