redux 表单字段的单选按钮答案

【问题标题】：Radio buttons for redux form fieldredux 表单字段的单选按钮
【发布时间】：2020-02-12 20:10:38
【问题描述】：

无法正常工作，我只想选择一个值，但我可以选择一个和多个......并且无法取消选择

有该功能的代码。

const RadioButtonField = ({type, options, disabled, onChange}) => {

   const handleChange = (value) => {
        onChange(type, value);
    };

    return (
        <div>
            {options.map(({ value, label }) =>
                <Radio.Group key={value}>
                    <Radio
                        disabled={disabled}
                        onChange={() => handleChange(value)}
                    >
                        {label}
                    </Radio>
                </Radio.Group>
            )}
        </div>
    );
};

【问题讨论】：

你在使用react-radio-group库吗？
不，我使用 ant design 单选按钮和 redux 表单
我的表单域中需要两个选项的单选按钮，是或否
您是从其他地方传递options 吗？为什么要传递所有参数？
我在字段中传递参数

标签： reactjs forms redux radio-button antd

【解决方案1】：

你可以试试这个单选也可以重选

import React from "react";
import "./styles.css";
import Radio from "@material-ui/core/Radio";

export default class App extends React.Component {
  state = {
    selectedValue: null,
    radioOptions: [
      { id: 1, title: "1" },
      { id: 2, title: "2" },
      { id: 3, title: "3" },
      { id: 4, title: "4" }
    ]
  };

  handleChange = id => {
    this.setState({
      selectedValue: id
    });
  };

  render() {
    const { selectedValue, radioOptions } = this.state;
    return (
      <div className="App">
        {radioOptions.map(option => {
          return (
            <div className="radio-parent">
              <lable
                onClick={() => this.handleChange(option.id)}
                className="radio-btn"
              >
                <Radio
                  color="default"
                  value={option.id}
                  name="radioValue"
                  checked={selectedValue == option.id}
                />
                {option.title}
              </lable>
            </div>
          );
        })}
      </div>
    );
  }
}

codesandBox link 用于演示

【讨论】：

【解决方案2】：

可以参考以下代码：

class App extends React.Component {
  state = {
    initialValue: "A",
    options: ["A", "B", "C", "D"]
  };

  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };

  render() {
    return (
      <Radio.Group value={this.state.initialValue}>
        {this.state.options.map((value, index) => {
          return (
            <Radio onChange={this.onChange} key={index} value={value}>
              {" "}
              {value}{" "}
            </Radio>
          );
        })}
      </Radio.Group>
    );
  }
}

工作codesandbox演示

我认为你不需要向函数传递任何东西。每当单击该选项时，event (e) 对象将传递给onChange(e)，您将分别在onChange(e)e.target.value 和e.target.checked 中获得单击项的值和检查值。

【讨论】：