我有一个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}
但它不起作用。输入在加载时保持空白。
答案 0 :(得分:1)
文档指出“如果不提供这些道具,则可以设置它们控制的状态的初始值”,并引用您提供的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")
);