如何从 React 中的映射选择输入中获取选定的值

免费领取国家顶级域名（.cn/.中国）

欢迎加入国家域名信源站点导航

站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

介绍

在处理 Web 项目时，构建选择输入元素非常简单。但随着 JavaScript 框架和库的出现，构建输入元素可能会有点棘手，因为您需要从数据的角度思考并提前规划应用程序中的所有输入元素。

在 React 中，所有输入元素都需要由状态控制，包括select元素。在本指南中，您将学习如何从 React 中的 select 输入中获取选定的值。

映射选择输入

首先创建一个对象数组，用于创建选择输入的选项。在本例中，创建一个选择输入，从水果列表中选择一个值。

      const options = [
  {
    label: "Apple",
    value: "apple",
  },
  {
    label: "Mango",
    value: "mango",
  },
  {
    label: "Banana",
    value: "banana",
  },
  {
    label: "Pineapple",
    value: "pineapple",
  },
];
    

您可能想知道，既然可以使用字符串来创建选项，为什么数组中还需要有对象。这是因为选项的值不一定必须与标签相同。

接下来，使用options数组，在App组件内创建一个具有不同选项的选择输入。将对象的value属性分配给options元素的value属性，以便正确映射选项，并可以检索 select 元素的值。

      import React from "react";

const options = [
  {
    label: "Apple",
    value: "apple",
  },
  {
    label: "Mango",
    value: "mango",
  },
  {
    label: "Banana",
    value: "banana",
  },
  {
    label: "Pineapple",
    value: "pineapple",
  },
];

class App extends React.Component {
  render() {
    return (
      <div id="App">
        <div className="select-container">
          <select>
            {options.map((option) => (
              <option value={option.value}>{option.label}</option>
            ))}
          </select>
        </div>
      </div>
    );
  }
}

export default App;
    

使用状态设置默认值

要在 React 中选择默认选项，需要在option元素中使用selected属性。但在 React 中，不是使用selected属性，而是在根select元素上使用value属性。因此，您可以通过在select输入元素的value属性中传递选项的值来设置默认值。这在受控组件中非常方便，因为您只需在一个地方更新值即可。

      class App extends React.Component {
  render() {
    return (
      <div id="App">
        <div className="select-container">
          <select value="banana">
            {options.map((option) => (
              <option value={option.value}>{option.label}</option>
            ))}
          </select>
        </div>
      </div>
    );
  }
}
    

获取选定的值

要从select元素中获取选定的值，可以使用onChange事件处理程序属性。就像input或textarea元素一样，您可以使用onChange事件处理程序从事件对象中获取值。

现在，让这个选择输入元素通过使用状态传递值来控制。在组件的状态中设置初始值，并在handleChange方法中将选定的值设置为状态中的新值。

      class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fruit: "banana",
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    console.log("Fruit Selected!!");
    this.setState({ fruit: e.target.value });
  }

  render() {
    return (
      <div id="App">
        <div className="select-container">
          <select value={this.state.fruit} onChange={this.handleChange}>
            {options.map((option) => (
              <option value={option.value}>{option.label}</option>
            ))}
          </select>
        </div>
      </div>
    );
  }
}

export default App;
    

结论

在本指南中，您了解了 select 输入元素的一些日常用例，例如如何开始、如何获取选定的值以及如何控制select元素。您可以使用react-select等第三方库来尽量减少所有样板代码。

这就是本指南的全部内容。继续学习！

了解更多

查看 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文