我通过设置defaultProps解决了一个类似的问题:

ComponentName.defaultProps = {
  propName: ''
}

<选择value = " this.props。propName”…

所以现在，如果我的道具在安装之前不存在，我可以避免在编译时出错。

我有一个简单的解决方案是遵循HTML基本。

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide是一个bootstrap的类，如果你不使用bootstrap，这里是:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

简单地添加作为选择标签的第一个选项:

<option disabled hidden value=''></option>

这将成为默认值，当您选择一个有效的选项将设置在您的状态

下面是如何做到这一点的最新例子。来自react文档，加上自动绑定“肥箭头”方法语法。

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
  }

  handleChange = (event) =>
    this.setState({value: event.target.value});

  handleSubmit = (event) => {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
} 

我通过设置defaultProps解决了一个类似的问题:

ComponentName.defaultProps = {
  propName: ''
}

<选择value = " this.props。propName”…

所以现在，如果我的道具在安装之前不存在，我可以避免在编译时出错。

我有一个问题，<选择>标签没有更新到正确的<选项>时，状态改变。我的问题似乎是，如果你连续渲染两次，第一次没有预先选择<选项>，但第二次有一个，那么<select>标签不会在第二次渲染时更新，而是首先保持默认值。

我找到了一个使用裁判的解决方案。您需要获得对<select>标记节点(可能嵌套在某些组件中)的引用，然后在componentDidUpdate钩子中手动更新该节点上的value属性。

componentDidUpdate(){
  let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
  selectNode.value = this.state.someValue;
}