Javascript React-Select组件具有与HTML5select元素类似的API

我试图在React中创建一个select组件，该组件将具有与html5select元素类似的api

考虑这一点：

<select>
<option value="one"> One </option>
<option value="two" selected> Two </option>
<option value="three"> Three </option>
</select>

单击一个子对象，我可以调用父函数来激活/选择该子对象

<Option onClick={this.props.select}> ...

。。。

我只是不知道如何从

selected

子道具推断

selectedOption

的初始值

我是否应该通过检查child是否选择了

属性，然后调用
this.props.select（）
，从child
componentDidMount（）
设置父状态

或

我是否应该通过映射所有
子对象
，然后在此基础上设置父对象状态来检查父对象
渲染
函数中的子对象属性？（这将是一个副作用）

还是有更好的处理方法？在这种情况下通常是如何进行的？
更新您的状态

更新您的状态，使
selectedOption
等于
null
。你的州应该是这样的：

state = {
  selectedOption: null, 
}; 

//necessary imports

class Select extends Component {
   state = {
     selectedOption: null, 
   } 

   handleChange = selectedOption => {
      this.setState({ selectedOption }); 
      const labelValue = selectedOption.label; 
      const valueOfOption = selectedOption.value; 
   } 

   render() {
     const { selectedOption } = this.state; 
     return (
       <div>
         <Option value={selectedOption} onClick={this.handleChange} />
       </div>
     )
   }
} 
export default Select;

创建
handleChange
函数

创建一个函数，该函数将在用户更改其选项时处理更改，并相应地更新状态

handleChange = selectedOption => {
   this.setState({ selectedOption }); //this sets selectedOption to an object containing the value and input of the selection
   //if you want to get the value and the input and store those in separate variables you can do this
   const labelValue = selectedOption.label // this gets whatever label you assigned to labelValue
   const valueOfOption = selectedOption.value //this gets the value of the option and assigns it to valueOfOption  
}

显然，您可以更新
state
变量，而不是实例化两个新变量（
labelValue
和
valueOfOption
）

更新渲染功能

更新渲染函数以在发生更改时调用句柄更改。更新您当前的来源。这里有：

<Option onClick={this.props.select()}>

现在，如果您的
select（）。您没有共享有关父组件的很多信息，因此我忽略了
select（）
函数，并创建了
handleChange（）

综上所述，你应该有这样的东西：

state = {
  selectedOption: null, 
}; 

//necessary imports

class Select extends Component {
   state = {
     selectedOption: null, 
   } 

   handleChange = selectedOption => {
      this.setState({ selectedOption }); 
      const labelValue = selectedOption.label; 
      const valueOfOption = selectedOption.value; 
   } 

   render() {
     const { selectedOption } = this.state; 
     return (
       <div>
         <Option value={selectedOption} onClick={this.handleChange} />
       </div>
     )
   }
} 
export default Select;

//必要的导入
类选择扩展组件{
状态={
selectedOption:null，
} 
handleChange=selectedOption=>{
this.setState（{selectedOption}）；
const labelValue=selectedOption.label；
const valueOfOption=selectedOption.value；
} 
render（）{
const{selectedOption}=this.state；
返回(
)
}
} 
导出默认选择；

应该是这样

其他帮助

有几个react软件包可以为您完成所有这些工作。我建议你调查一下，这样你就不必重新发明轮子了。首先想到的是反应选择v2。您可以访问该网站（原始链接：）。我建议仔细阅读示例和文档

React Select的安装是：
npm i React Select
或
纱线添加React Select

还有其他一些，如
rc-select
或
react-virtualized-select
等。你可以研究它们，看看哪一个最适合你的需要，或者继续开发你自己的

希望这有帮助。
我最终在父级的
组件didmount
中设置了父级的初始状态，如下所示：

componentDidMount() {
const { children } = this.props;
let selectedOption = null;
// check if child elements have a 'selected' attribute and set state based on it
React.Children.map(children, (child, index) => {
  if (child.props.selected) {
    selectedOption = index;
  }
});

this.setState({ selectedOption });

}
谢谢您的详细回答。这并不能解决我在渲染时从子级派生初始父级状态的问题。孩子们可能有一个“selected”道具，它决定了“selectedOption”的价值，我们如何处理？（我知道怎么做onClick）那么你是在把一个函数从父函数传递给子函数吗？您想在子组件中调用该函数并将该值传递回父组件吗？我是否正确理解，我希望基于子道具设置父级状态，而不是单击事件，而只是初始父级渲染。当组件第一次渲染时，父级需要检查是否有任何子级具有“选定”属性，并根据该属性的值设置其状态。这只是初始状态，从那时起，状态可以根据单击的子项进行更改。