选中两个Material-UI单选按钮

问题描述

我有一个呈现RadioGroup，FormControlLabel和FormControl的文件。下面是此代码

import React from 'react';
import PropTypes from 'prop-types';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControl from '@material-ui/core/FormControl';
import Formlabel from '@material-ui/core/Formlabel';
import FormControlLabel from '@material-ui/core/FormControlLabel';

export const RenderRadioGroup = ({ label,children }) => {
  return (
    <FormControl>
      <Formlabel
        style={{
          margin: '20px 0 20px 0',color: '#000000',fontSize: '20px',fontWeight: 'bold',}}
      >
        {label}
      </Formlabel>
      <RadioGroup row>{children}</RadioGroup>
    </FormControl>
  );
};

export const RenderRadioButtonWrapper = props => {
  return <FormControlLabel control={<CustomradioButton />} {...props} />;
};

export const CustomradioButton = props => {
  return <Radio {...props} />;
};

RenderRadioGroup.propTypes = {
  children: PropTypes.node.isrequired,label: PropTypes.string,};

RenderRadioButtonWrapper.propTypes = {
  label: PropTypes.string,};

CustomradioButton.propTypes = {
  label: PropTypes.string,};

在主文件中，我将这些组件称为如下

    <form>
       <Field
           name="typeofintimation"
           label="Type of intimation"
           component={RenderRadioGroup}
        >
                <Field
                  label="Via Call"
                  name="viacall"
                  value="viacall"
                  component={RenderRadioButtonWrapper}
                />
                <Field
                  label="Via Email"
                  name="viaemail"
                  value="viaemail"
                  component={RenderRadioButtonWrapper}
                />
              </Field>
              <Field component={renderTextFieldGroup} label="Caller Details">
                <Field component={renderTextField} label="Caller Name" />
                <Field component={renderTextField} label="Caller Email" />
                <Field component={renderTextField} label="Caller Contact" />
              </Field>
            </form>

我正在获取无线电字段，但是都选中了。我无法选择或取消选择单选按钮。 我在这里想念什么？我需要在组件或主文件中传递一些道具吗？

我也在这里使用redux-form，所以我需要一些帮助。

解决方法

您需要在道具中明确提供一个名称，以便系统知道两个单选按钮属于同一组。 API的道具列表中的文档说：

name字符串用于引用控件值的名称。如果 您不提供此道具，它会退回到随机生成的 名称。

有关完整列表，请参见https://material-ui.com/api/radio-group/。

单选按钮按名称分组-因此，如果单击组中的一个按钮，则所有其他按钮将被清除。您有两个单选按钮，但是它们的名称不同，因此系统认为它们位于不同的组中，因此可以对它们进行检查。

如果您尝试更换：

        <Field
          label="Via Call"
          name="viacall"
          value="viacall"
          component={RenderRadioButtonWrapper}
        />
        <Field
          label="Via Email"
          name="viaemail"
          value="viaemail"
          component={RenderRadioButtonWrapper}
        />

使用

            <Field
              label="Via Call"
              name="viamethod"
              value="viacall"
              component={RenderRadioButtonWrapper}
            />
            <Field
              label="Via Email"
              name="viamethod"
              value="viaemail"
              component={RenderRadioButtonWrapper}
            />

您只能在“裸” HTML中选择一个。但是，在使用API​​创建单选按钮的地方，您需要显式设置name：，并为两者设置相同的名称，例如名称：“ viamethod”，否则您将获得随机名称，并且两个单选按钮将不在同一组中。

,

以 radioValue 的状态为“”开始。

<RadioGroup row className={classes.FormGroup}>
  <FormControlLabel
    classes={{ label: classes.label }}
    control={
      <Radio
        name="Yes"
        checked={this.state.radioValue[key]}
        onClick={(e) => {this.handleRowClick(e,row,index)}}
        value="Y"
      />
    }
    label="Yes"
    labelPlacement="end"
  />
  <FormControlLabel
    classes={{ label: classes.label }}
    control={
      <Radio
        name="No"
        checked={this.state.radioValue[key]}
        onClick={(e) => {this.handleRowClick(e,row)}}
        color="secondary"
        value="N"
      />
    }
    label="No"
    labelPlacement="end"
  />
</RadioGroup>