React 中的下拉菜单 - Select 和 onChange

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React 中的自定义选择组件
  2. 使用 JSX
  3. react-select
React 中的下拉菜单 - Select 和 onChange

要创建交互式应用程序,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 avatar Irakli Tchigladze avatar

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

LinkedIn

相关文章 - React Dropdown