React 中的下拉菜单 - Select 和 onChange

Irakli Tchigladze 2024年2月16日

React React Dropdown React Select

React 中的自定义选择组件
使用 JSX
react-select 包

要创建交互式应用程序，React 开发人员必须创建输入元素并处理事件。下拉表单很普遍，是最有用的输入类型之一。它们允许用户选择众多选项之一或默认选择一个。一旦选择了选项，我们就可以访问它的值并将其存储在组件状态中。

选择表单的主要目的是收集用户的数据。例如，你可能想要让用户选择他们的性别。

事件处理程序的目的是跟踪用户更新组件状态的操作。对于 <select/> 元素，onChange 事件处理程序是最有用的，因为它会在用户选择不同的 <option/> 时触发。

React 中的自定义选择组件

如果你需要具有复杂功能的普通 <select/> 元素，最好创建一个单独的组件。通过这种方式，你可以设置事件处理程序、存储选择值，并在必要时触发父组件中的更改。你还可以使用 props 将数据提供给自定义的 select 组件。让我们看一个简单的例子：

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="1-10">1-10</option>
    		<option value="10-15">10-15</option>
    		<option value="15-20">15-20</option>
    		<option value="20+">20+</option>
   		</select>
    	<h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}

这是一个非常基本的组件，它封装了 <select> 元素的主要功能。用户可以选择其中一个选项，selectedValue 状态属性将存储他们选择的值。

请注意，change 事件发生在 <select> 元素上，而不是它的子元素上。用户有多个选项可供选择，每当他们改变他们的选择时，onChange 属性中的事件处理程序将被执行以更新组件状态。

每次状态改变时，组件都会重新渲染并在 <h1> 文本中显示更新后的值。在 playcode 上自己尝试一下。

呈现一系列选项

如果组件根据通过 props 传递的数据调整其输出，则组件通常会更有用。在我们的示例中，我们有一个自定义组件，其中包含 <select> 元素的核心功能。然而，在我们的 JSX 代码中使用一组硬编码的选项违背了创建自定义组件的目的。通过 props 接受一系列选项并相应地呈现选项会更实用。下面是一个例子：

class CustomSelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
    <select onChange={(e) => handleChange(e)}>
    {this.props.options.map(arrayItem => <option value={arrayItem}>{arrayItem}</option>)}
    </select>
    <h1>You chose {this.state.selectedValue}</h1>
    </div>
    );
  }
}
CustomSelect.defaultProps = {
  options: ["1-10", "10-15", "15-20", "20+"]
}

这种方法使我们可以更自由地以多种不同方式使用我们的 <CustomSelect> 组件。如果我们多次创建 select 元素，我们只需要将选项数组作为 props 传递。例如：

return (
    <div>
    ...
    <CustomSelect props=[firstArr]></CustomSelect>
    <CustomSelect props=[secondArr]></CustomSelect>
    ...
    </div>
    );

功能组件

到目前为止，我们的示例仅使用类组件。你还可以使用函数创建自定义选择组件。事实上，自从引入 hooks 以来，React 开发人员开始强烈地偏爱函数式组件。要了解有关功能组件和类组件之间差异的更多信息，请阅读本指南。

使用 JSX

如果你只需要使用 <select> 一次，你可以直接在 JSX 中包含该元素。如果你不知道，JSX 是 React 的一种特殊语法，它看起来很像常规的 HTML 语法，但为开发人员提供了创建动态应用程序的更多能力。

这是 JSX 实现的样子：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedValue: ""
    }
  }
  render() {
    const handleChange = (e) => {
      this.setState({selectedValue: e.target.value})
    }
    return (
    <div>
        <p>Choose the size of the t-shirt</p>
    	<select onChange={(e) => handleChange(e)}>
    		<option value="S">S</option>
    		<option value="M">M</option>
    		<option value="L">L</option>
    		<option value="XL">XL</option>
   		</select>
    </div>
    );
  }
}

`react-select` 包

如果你正在寻找高级解决方案，请考虑安装 react-select 包，它提供了一个自定义的 Select，具有广泛的功能，如自动完成和多选。查看他们的网站以更好地了解这些功能。

作者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React 中的自定义选择组件

呈现一系列选项

功能组件

使用 JSX

react-select 包

相关文章 - React Dropdown

`react-select` 包