javascript - 处理 React JS 变化的广播？

问题描述

我正在使用 React 和 React Forms，但在尝试处理单选按钮的状态更改时遇到了麻烦。我有一个函数getField可以动态地呈现来自状态的输入类型。我有另一个函数HandleFormStateChange可以处理输入的更改事件，但我遇到了单选按钮的问题。用户一次应该只能选择一个选项，但似乎是同时选择了选项。

请查看此CodeSandbox。

这是完整的代码：

import React from "react";

class App extends React.Component {
  state = {
    Forms: [{ name: "Radio", type: "radio", options: ["a", "b", "c"] }]
  };

  handleFormStateChange = (event, idx) => {
    const target = event.target;
    const form = [...this.state.Forms];
    form[idx].value = "";
    form[idx].value = target.type === "radio" ? target.value : form[idx].value;
    this.setState({
      form
    });
  };

  getField = (field, index) => {
    switch (field.type) {
      case "radio":
        return (
          <div>
            {field.options.map(option => (
              <label key={field.type + "op" + option}>
                {option}:
                <input
                  onChange={event => {
                    this.handleFormStateChange(event, index);
                  }}
                  key={option}
                  type={field.type}
                  name={option}
                  value={option}
                />
              </label>
            ))}
          </div>
        );
      default:
        return <div>Unknown form field</div>;
    }
  };

  renderForm = () => {
    return this.state.Forms.map((field, index) => (
      <label key={index}>
        {field.name}
        {this.getField(field, index)}
      </label>
    ));
  };

  render() {
    return <div>{this.renderForm()}</div>;
  }
}

export default App;

任何帮助将不胜感激。谢谢：）

标签： javascriptreactjs

它选择了多个选项，因为您的单选按钮没有按名称分组，它们有自己的单独名称。我已经在您的代码框中进行了编辑-我们必须name为您的单选按钮设置相同的内容才能将它们组合在一起。如果您想将它们组合在一起，复选框的情况也是如此。

我对您的代码进行了一些更改：

我添加了一个名称来标识无线电组。

state = {
    Forms: [
      {
        name: "Radio",
        radioGroupName: "chosenAlphabet",
        type: "radio",
        options: ["a", "b", "c"]
      }
    ]
  };

我已经更改了您的字段渲染函数中的名称属性。

<input
   onChange={event => {
    this.handleFormStateChange(event, index);
   }}
   key={option}
   type={field.type}
   name={field.radioGroupName}
   value={option}
 />

javascript - 处理 React JS 变化的广播？

问题描述

解决方案

推荐阅读