警告:使用'defaultValue'或'value'道具而不是设置'selected'

问题描述 投票:12回答:3

场景用户有一个下拉列表并选择一个选项。我想显示该下拉列表并将该选项设置为上次由该用户选择的默认值。

我在选项上使用了选定的属性,但React会生成一个警告,要求我在select上使用默认值。

对于例如

render: function() {
    let option_id = [0, 1];
    let options = [{name: 'a'}, {name: 'b'}];
    let selectedOptionId = 0

    return (
      <select defaultValue={selectedOptionId}>
        {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
        )}
      </select>
    )
  }
});

问题是我不知道selectedOptionId,因为所选的选项可以是任何选项。我怎样才能找到defaultValue?

reactjs select dropdown
3个回答
27
投票

React使用value instead of selected来保证表单组件的一致性。您可以使用defaultValue设置初始值。如果你是controlling the value,你也应该设置value。如果没有,请不要设置value,而是处理onChange事件以响应用户操作。

请注意,valuedefaultValue应该与期权的value相匹配。


8
投票

在要设置占位符但未选择默认值的实例中,可以使用此选项。

      <select defaultValue={'DEFAULT'} >
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>

在这里,用户被迫选择一个选项!

编辑

如果这是一个受控制的组件

在这种情况下,请勿使用默认值。

 function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} onChange={props.onChange}>
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>
    )
}

6
投票

你可以做的是让selected标签上的<select>属性是你在构造函数中设置的this.state的属性。这样,您设置的初始值(默认值)以及下拉菜单更改时您需要更改状态。

constructor(){
  this.state = {
    selectedId: selectedOptionId
  }
}

dropdownChanged(e){
  this.setState({selectedId: e.target.value});
}

render(){
  return(
    <select value={this.selectedId} onChange={this.dropdownChanged.bind(this)}>
      {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
      )}
    </select>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.