单选按钮的反应组件答案

【问题标题】：React component for radio button单选按钮的反应组件
【发布时间】：2023-04-05 18:43:01
【问题描述】：

我有一个包含许多输入和选择字段的表单。我使用输入和选择进行管理，但现在我正在尝试添加单选按钮和文本区域。在用户选择一个选项后，我发送的 json 没有更新来自无线电标头的值，并且选中的属性在按下时也没有更新。

这是单选按钮组件：

class RadioButton extends Component {
  state = {
    selectedOption: this.props.options[0].name,
  };

  handleOptionChange = (changeEvent) => {
    this.setState({
      selectedOption: changeEvent.target.value,
    });
  };

  render() {
    const { name, label, headline, options, ...rest } = this.props;
    return (
      <div>
        <legend>{headline}</legend>
        {options.map((option) => (
          <div className="form-check">
            <label className="form-check-label" htmlFor={name}>
              <input
                type="radio"
                className="form-check-input"
                name={name}
                key={option._id}
                value={option.value}
                checked={this.state.selectedOption === option.name}
                onChange={this.handleOptionChange}
              ></input>
              <label>{option.name}</label>
            </label>
          </div>
        ))}
      </div>
    );
  }
}

这是我在表单中渲染单选按钮的代码：

  renderRadioButton(name, label, headline, options) {
    const { data } = this.state;
    console.log(name);
    return (
      <RadioButton
        name={name}
        label={label}
        headline={headline}
        value={data[name]}
        options={options}
      />
    );
  }

这是渲染单选按钮的调用（这个类派生表单类）：

  state = {
    data: {
      first_name: "",
      last_name: "",
      is_looking_for_job: "",
    },
    boolean_options: [
      { _id: 1, name: "Yes", value: "True" },
      { _id: 2, name: "No", value: "False" },
    ],
  };
          {this.renderRadioButton(
            "is_looking_for_job",
            "Looking for job",
            "Looking for job",
            this.state.boolean_options
          )}

我希望有人可以帮助我。提前致谢！

【问题讨论】：

你帮助这个link

标签： reactjs

【解决方案1】：

您的class RadioButton 不应处理选定的值，应由创建组件的父级处理，并且该值应作为道具传递。

您的 RadioButton 组件应更新为：

class RadioButton extends Component {
  render() {
    const { name, headline, value, options, onChange } = this.props;
    return (
      <div>
        <legend>{headline}</legend>
        {options.map((option) => (
          <div className="form-check" key={option.value}>
            <label className="form-check-label" htmlFor={name}>
              <input
                type="radio"
                className="form-check-input"
                name={name}
                key={option._id}
                value={option.value}
                checked={value === option.value}
                onChange={() => onChange(option.value)}
              ></input>
              <label>{option.name}</label>
            </label>
          </div>
        ))}
      </div>
    );
  }
}

而且应该这样使用：

class MyComponent extends Component {
  state = {
    lookingForJob: "False",
    boolean_options: [
      { _id: 1, name: "Yes", value: "True" },
      { _id: 2, name: "No", value: "False" }
    ]
  };

  renderRadioButton(name, label, headline, options) {
    return (
      <RadioButton
        name={name}
        label={label}
        headline={headline}
        value={this.state.lookingForJob}
        options={options}
        onChange={(newValue) => this.setState({ lookingForJob: newValue })}
      />
    );
  }

  render() {
    return this.renderRadioButton(
      "Name",
      "Label",
      "Headline",
      this.state.boolean_options
    );
  }
}

【讨论】：

【解决方案2】：

我认为这行是问题所在：

checked={this.state.selectedOption === option.name}

改成这样：

checked={this.state.selectedOption === option.value}

【讨论】：