代码之家 › 专栏 › 技术社区 › KAT

反应选择不识别默认值

react-select reactjs javascript

2

KAT · 技术社区 · 6 年前

我有一个react select组件没有识别默认值选项。代码如下所示:

renderPlans(){
        if(this.props.plans){
            let list =  this.props.plans.map(item=>{
                return ({label:item.description, value:item.id})
            });

            return(
                <Select
                    name= "tile-plans"
                    value= {this.state.selected}
                    classNamePrefix='react-select-container'
                    options={list}
                    defaultValue={list[0]}
                    onChange={(e) => { e ? this.setState({selected: e.value}) : this.setState({selected: ''}) }}
                />
            )
        }
    }

从所有我能在它的文档上找到的东西来看,这就是它的格式。基本上,我只希望第一个选项始终是默认选项,因为有时只有一个选项,而有些人不需要选择下拉列表。我还有一个正在下面加载的图,所以如果选择了一个选项,该图将不会加载。

这不是重复的问题,因为我知道你可以这样做: value= {this.state.selected ? this.state.selected:list[0].label} 但没用。加载时输入保持为空。

1 回复 | 直到 6 年前

1

Tholle 6 年前

文档说明“如果不提供这些道具,可以设置它们所控制的状态的初始值”,其中引用 value 你提供的道具。

你可以设置 selected 到中的第一个元素 list 当组件被创建时。

例子

class App extends React.Component {
  state = {
    selected: this.props.list[0]
  };

  handleChange = selected => {
    this.setState({ selected });
  };

  render() {
    const { selected } = this.state;

    return (
      <Select
        value={selected}
        onChange={this.handleChange}
        options={this.props.list}
      />
    );
  }
}

ReactDOM.render(
  <App
    list={[
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ]}
  />,
  document.getElementById("root")
);