Радиокнопки для поля формы - PullRequest
Новая
       8

Радиокнопки для поля формы

0 голосов
/ 12 февраля 2020

Это не работает правильно, я хочу выбрать только одно значение, но я могу выбрать одно и более ... и не могу отменить выбор

есть код для этой функции. 

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

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Вы можете попробовать это для одиночного выбора, а также вы можете выбрать заново 

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

кодов и ссылок для демонстрации

0 голосов
/ 12 февраля 2020

Вы можете обратиться к следующему коду: 

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 demo

Я думаю, вам не нужно ничего передавать функции. При каждом нажатии опции объект event (e) будет передан в onChange(e), и вы получите значение выбранного элемента и проверенное значение в onChange(e) e.target.value и e.target.checked соответственно.

...