redux 表单字段的单选按钮

Question

它不能正常工作，我只想 select 一个值，但我可以 select 一个和多个...但不能 deselect

有该函数的代码。

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>
    );
};

Answer 1

您可以参考以下代码：

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 和 [=15] 中获得单击项目的值和选中的值=]分别。

Answer 2

单选可以试试，也可以重选

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 演示

redux 表单字段的单选按钮

Radio buttons for redux form field

forms

radio-button

reactjs

redux

antd