在 React 中创建 <select> 元素

2020-06-15 08:00:00 · 飞浪

介绍 React支持所有类型的DOMHTML元素，可用于通过各种组件（如文本输入、文件上传、选择、单选按钮和复选框）实现表单或其他功能。在Web应用开发中，您可能需要根据某些条件动态创

介绍

React 支持所有类型的 DOM HTML 元素，可用于通过各种组件（如文本输入、文件上传、选择、单选按钮和复选框）实现表单或其他功能。

在 Web 应用开发中，您可能需要根据某些条件动态创建元素。在本指南中，您将学习如何创建动态选择元素并呈现选择元素的动态选项。

创建动态选择元素

select 元素是一种常见元素，允许用户从可用选项列表中选择特定元素。select 元素可以通过两种不同的方式创建：使用静态元素添加到 DOM 中或将其动态添加到 DOM 中。

下面是一些需要 Axios 包的示例，它们可以帮助您掌握创建动态选择元素的过程。Axios 是一个HttpClient，可帮助发出 HTTP 请求，例如GET、POST、PUT和DELETE。

使用以下代码安装 Axios：

      npm install axios

现在您已经安装了该软件包，请创建一个虚拟示例来演示动态选择元素。参考组件App.js并实现 AXIOS GET API 调用，如下所示。

      import React, { Component } from "react";
import { render } from "react-dom";
import DynamicSelect from "./DynamicSelect";
import axios from "axios";

class App extends Component {
  constructor() {
    super();
    this.state = {
    };
  }

  componentDidMount() {
    var self = this;
    axios
      .get("https://reqres.in/api/users?page=1", {
        mode: "no-cors"
      })
      .then(function(response) {
        self.setState({ users: response.data.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render() {
    const { users } = this.state;
    return (
      <div>
        <DynamicSelect users={users} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

在上面的例子中，Axios API 调用实现了生命周期钩子componentDidMount()。

因此，一旦响应成功，详细信息就会添加到状态变量用户中，如下所示。

      .then(function(response) {
    self.setState({ users: response.data.data });
})
    

从状态获取值后，下一步是将数据发送给子组件，如下所示。

      render() {
    const { users } = this.state;
    return (
      <div>
        <DynamicSelect users={users} />
      </div>
    );
}
    

现在，定义上面代码中使用的组件DynamicSelect.jsx 。

      import React, { Component } from "react";

class DynamicSelect extends Component {
  constructor() {
    super();
    this.onChangeUser = this.onChangeUser.bind(this);
  }

  onChangeUser(event) {
    console.log(event.target.value);
  }

  render() {
    const { users } = this.props;
    
    return (
      <div>
        This is dynamic select element demo
        <div>
          <span>Select user</span> :
          {users && users.length > 0 && (
            <div>
              /* Adding dynamic select element */
              <select onChange={this.onChangeUser}>
                {users.map((user, index) => {
                  return <option>{user.email}</option>;
                })}
              </select>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default DynamicSelect;
    

现在让我们看一下上述组件中实现的每个功能。

在render()函数内部，你将观察到有一个条件，它标识了来自 props users 的足够值。

      {users && users.length > 0 && () }

因此，一旦从 props users中找到足够的记录，就会创建动态<select>元素；否则，就不会创建。

一旦用户改变了选择的值，它就会反映该事件并可以按如下所示使用。

      onChangeUser(event) {
    console.log(event.target.value);
}
    

这样，您可以根据条件或自定义业务逻辑创建动态<select>元素并将其呈现到 DOM 中。

呈现动态选项的另一种方法

在上面的例子中，为了映射用户，我使用了map()函数，该函数来自名为App 的父组件。

您还可以实现返回动态<options>的函数，并且可以在<select>元素内添加选项。

      render() {
    return (
      <div>
        This is dynamic select element demo
        <div>
          <span>Select user</span> :{" "}
          <select onChange={this.onChangeUser}>
            {this.renderOptions()}
          </select>
        </div>
      </div>
    );
}
    

在<select>元素中，你会发现有一个名为this.renderOptions() 的函数，该函数应该返回动态<options>，可以按如下方式实现。

      renderOptions() {
    const { users } = this.props;
    return (
      users &&
      users.length > 0 &&
      users.map((user, index) => {
        return <option>{user.email}</option>;
      })
    );
}
    

从函数renderOptions()中，可以返回用户的动态列表，并且可以在<select>元素内使用它。

这是一种用于规范代码的实现，有助于直接构造组件。

结论

React 应用程序可能包含动态表单字段，包括<select>元素，其中包含多个可供选择的选项。

在本指南中，您学习了根据条件添加动态<select>和<options>元素的标准机制。我希望它能帮助您在 React 应用中实现动态表单控件。

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

_查看原文

技术指南

React框架

阅读全文

在 React 中创建 <select> 元素

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from "react"; import { render } from "react-dom"; import DynamicSelect from "./DynamicSelect"; import axios from "axios"; class App extends Component { constructor() { super(); this.state = { }; } componentDidMount() { var self = this; axios .get("https://reqres.in/api/users?page=1", { mode: "no-cors" }) .then(function(response) { self.setState({ users: response.data.data }); }) .catch(function(error) { console.log(error); }); } render() { const { users } = this.state; return ( <div> <DynamicSelect users={users} /> </div> ); } } render(<App />, document.getElementById("root"));

import React, { Component } from "react"; class DynamicSelect extends Component { constructor() { super(); this.onChangeUser = this.onChangeUser.bind(this); } onChangeUser(event) { console.log(event.target.value); } render() { const { users } = this.props; return ( <div> This is dynamic select element demo <div> <span>Select user</span> : {users && users.length > 0 && ( <div> /* Adding dynamic select element */ <select onChange={this.onChangeUser}> {users.map((user, index) => { return <option>{user.email}</option>; })} </select> </div> )} </div> </div> ); } } export default DynamicSelect;

render() { return ( <div> This is dynamic select element demo <div> <span>Select user</span> :{" "} <select onChange={this.onChangeUser}> {this.renderOptions()} </select> </div> </div> ); }

renderOptions() { const { users } = this.props; return ( users && users.length > 0 && users.map((user, index) => { return <option>{user.email}</option>; }) ); }