javascript - React - 选择具有与 HTML5 选择元素类似 API 的组件

Question

我正在尝试在 React 中创建一个选择组件，它具有与 html5 选择元素类似的 api。

考虑一下:

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

selectedOption 将是顶级 React Select 元素中的状态。

...
Class Select extends React.Component {
 state = { selectedOption: //how do i get this value? };
...

单击子项时，我可以调用父函数来激活/选择子项

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

我只是不确定如何从 selected 子属性推断 selectedOption 的初始值。

我是否应该通过检查子组件是否有 selected 属性然后调用 this.props.select()？

或者

我应该通过映射所有children来检查父render函数中的子属性，然后根据它设置父状态吗？ (这将是一个副作用)

或者有更好的方法来处理吗？这种情况下一般是怎么做的？

Answer 1

更新您的状态

更新您的状态，使 selectedOption 等于 null。您的状态应如下所示:

state = {
  selectedOption: null, 
}; 

创建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()函数都会以这种方式调用。正确的方法是:onClick={() => this.props.select()}。

你会想要这个:

<Option onClick={this.handleChange}> //should this be onChange? not sure how your Option component is set up though

现在，如果您的 select() 函数是通过 props 向下传递的函数(看起来像)，那么您需要在父组件中处理 selectedOption 。您没有分享有关父组件的太多信息，因此我忽略了 select() 函数并创建了 handleChange()。

将所有这些放在一起，您应该得到如下所示的内容:

//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;

应该是这个。

其他帮助

有几个 React 包可以为您完成所有这些工作。我建议您研究一下这些内容，这样您就不必重新发明轮子。我首先想到的是 React Select v2。您可以访问网站here (原始链接:https://react-select.com/home)。我建议仔细阅读示例和文档。

React Select 的安装是:npm i react-select 或 yarn add react-select .

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

希望这有帮助。