在 React 中实现带有文本输入的单选列表

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

介绍使用纯HTML构建表单似乎相当容易，但使用像React这样的JavaScript框架时，可能会有点棘手。React希望您使用状态自行管理表单数据，而不是依赖DOM来维护表单数据。

介绍

使用纯 HTML 构建表单似乎相当容易，但使用像 React 这样的 JavaScript 框架时，可能会有点棘手。React 希望您使用状态自行管理表单数据，而不是依赖 DOM 来维护表单数据。

如果您有一组固定的输入字段，则可以轻松地将它们添加到组件中；但动态字段可能具有挑战性，因为您需要维护状态中的字段。在本指南中，您将学习如何使用文本输入创建动态单选列表。

从组件类开始

由于所有表单数据都需要由 state 处理，因此请在 state 中创建属性以存储文本输入和单选按钮列表值。此外，在 state 中初始化一个空数组以存储单选按钮选项。

      class App extends Component {
  state = {
    textValue: "",
    checkedOptionValue: "",
    options: [],
  };
}
    

创建文本输入以添加单选选项以及添加按钮。

      class App extends Component {
  state = {
    textValue: "",
    checkedOptionValue: "",
    options: [],
  };

  render() {
    return (
      <div className="App">
        <input
          type="text"
          value={textValue}
          onChange={(e) => this.setState({ textValue: e.target.value })}
        />
        <button onClick={this.handleOptionAdd}>Add</button>
      </div>
    );
  }
}
    

当用户点击添加按钮时，将文本值推送到选项状态。仅当文本值的长度大于零时才推送文本值；否则，您最终将得到值为空的单选选项。这里要注意的另一件事是，您需要将选项存储为标签和值的对象。

      handleOptionAdd = () => {
  const { options, textValue } = this.state;
  if (textValue.trim().length === 0) return;
  this.setState({ textValue: "" });
  this.setState({
    options: [
      ...options,
      {
        label: textValue,
        value: textValue.toLowerCase().replace(" ", "-"),
      },
    ],
  });
};
    

渲染广播列表

要呈现单选按钮列表，请使用map()方法迭代选项状态数组。确保所有单选按钮都具有相同的name prop，以便用户只能选中一个单选按钮。

      const { options, checkedOptionValue } = this.state;
//
{
  options.map((option) => (
    <div>
      <input
        type="radio"
        name="dynamic-radio"
        value={option.value}
        checked={checkedOptionValue === option.value}
        onChange={this.handleRadioChange}
      />
      <label>{option.label}</label>
    </div>
  ));
}
    

完整组件代码

查看本节中组件的完整代码。

      import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = {
    textValue: "",
    checkedOptionValue: "",
    options: [],
  };

  handleOptionAdd = () => {
    const { options, textValue } = this.state;
    this.setState({ textValue: "" });
    this.setState({
      options: [
        ...options,
        {
          label: textValue,
          value: textValue.toLowerCase().replace(" ", "-"),
        },
      ],
    });
  };

  handleRadioChange = (e) =>
    this.setState({ checkedOptionValue: e.target.value });

  render() {
    const { options, textValue, checkedOptionValue } = this.state;
    return (
      <div className="App">
        <input
          type="text"
          value={textValue}
          onChange={(e) => this.setState({ textValue: e.target.value })}
        />
        <button onClick={this.handleOptionAdd}>Add</button>

        <div>
          {options.map((option) => (
            <div>
              <input
                type="radio"
                name="dynamic-radio"
                value={option.value}
                checked={checkedOptionValue === option.value}
                onChange={this.handleRadioChange}
              />
              <label>{option.label}</label>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;
    

使用钩子实现

您可以使用功能组件中的useState钩子实现相同的功能。将options、textValue和radioValue存储在单独的状态变量中，组件的其余部分的工作方式与类组件类似。

      import React, { useState } from "react";
import "./styles.css";

function App() {
  const [options, setOptions] = useState([]);

  const [textValue, setTextValue] = useState("");

  const [radioValue, setRadioValue] = useState("");

  const handleOptionAdd = () => {
    if (textValue.trim().length === 0) return;
    setTextValue("");
    setOptions([
      ...options,
      { label: textValue, value: textValue.toLowerCase().replace(" ", "-") },
    ]);
  };

  return (
    <div className="App">
      <input
        type="text"
        value={textValue}
        onChange={(e) => setTextValue(e.target.value)}
      />
      <button onClick={handleOptionAdd}>Add</button>

      <div>
        {options.map((option) => (
          <div>
            <input
              type="radio"
              name="dynamic-radio"
              value={option.value}
              checked={radioValue === option.value}
              onChange={(e) => setRadioValue(e.target.value)}
            />
            <label>{option.label}</label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;
    

结论

在 React 中构建表单时，考虑状态以及如何使用状态管理表单数据至关重要。依赖 DOM 来处理表单数据可能会导致不可预测的结果，使代码难以测试。在 React 中处理单选按钮列表与您通常在 HTML 中执行的操作略有不同，但一旦您了解如何处理状态中的值，在 React 中设置就会变得更容易。

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

_查看原文

技术指南

React框架

阅读全文

在 React 中实现带有文本输入的单选列表

杭州电子商务研究院

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

class App extends Component { state = { textValue: "", checkedOptionValue: "", options: [], }; render() { return ( <div className="App"> <input type="text" value={textValue} onChange={(e) => this.setState({ textValue: e.target.value })} /> <button onClick={this.handleOptionAdd}>Add</button> </div> ); } }

handleOptionAdd = () => { const { options, textValue } = this.state; if (textValue.trim().length === 0) return; this.setState({ textValue: "" }); this.setState({ options: [ ...options, { label: textValue, value: textValue.toLowerCase().replace(" ", "-"), }, ], }); };

const { options, checkedOptionValue } = this.state; // { options.map((option) => ( <div> <input type="radio" name="dynamic-radio" value={option.value} checked={checkedOptionValue === option.value} onChange={this.handleRadioChange} /> <label>{option.label}</label> </div> )); }

import React, { Component } from "react"; import "./styles.css"; class App extends Component { state = { textValue: "", checkedOptionValue: "", options: [], }; handleOptionAdd = () => { const { options, textValue } = this.state; this.setState({ textValue: "" }); this.setState({ options: [ ...options, { label: textValue, value: textValue.toLowerCase().replace(" ", "-"), }, ], }); }; handleRadioChange = (e) => this.setState({ checkedOptionValue: e.target.value }); render() { const { options, textValue, checkedOptionValue } = this.state; return ( <div className="App"> <input type="text" value={textValue} onChange={(e) => this.setState({ textValue: e.target.value })} /> <button onClick={this.handleOptionAdd}>Add</button> <div> {options.map((option) => ( <div> <input type="radio" name="dynamic-radio" value={option.value} checked={checkedOptionValue === option.value} onChange={this.handleRadioChange} /> <label>{option.label}</label> </div> ))} </div> </div> ); } } export default App;

import React, { useState } from "react"; import "./styles.css"; function App() { const [options, setOptions] = useState([]); const [textValue, setTextValue] = useState(""); const [radioValue, setRadioValue] = useState(""); const handleOptionAdd = () => { if (textValue.trim().length === 0) return; setTextValue(""); setOptions([ ...options, { label: textValue, value: textValue.toLowerCase().replace(" ", "-") }, ]); }; return ( <div className="App"> <input type="text" value={textValue} onChange={(e) => setTextValue(e.target.value)} /> <button onClick={handleOptionAdd}>Add</button> <div> {options.map((option) => ( <div> <input type="radio" name="dynamic-radio" value={option.value} checked={radioValue === option.value} onChange={(e) => setRadioValue(e.target.value)} /> <label>{option.label}</label> </div> ))} </div> </div> ); } export default App;