Material-UI 单选按钮都被选中

Question

I have a file which renders RadioGroup, FormControlLabel and FormControl. Below is the code for this

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

In the main file, I am calling these components as follows

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

I am getting the radio fields but both are checked. I cannot select or deselect the radio buttons. What am I missing here? Is there some props which I need to pass in either the component or the main file?

I am also using redux-form here so I need some assitance in that.

Answer 1

You need to explicitly supply a name in the props so that the system knows that the two radio buttons belong to the same group. The documentation for the API in its list of props says:

name string The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.

See https://material-ui.com/api/radio-group/ for the full list.

Radio buttons are grouped by name - so if you click one of the buttons in a group all the others are cleared. You have the two radio buttons but they have different names so the system thinks they are in different groups and so both can be checked.

If you try replacing:

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

with

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

you can only select one in 'naked' HTML. However, where you are creating the radio buttons using the API you need to explicitly set name: and make it the same name for both eg name: 'viamethod' otherwise you will get random names and the two radio buttons won't be in the same group.

Answer 2

start with radioValue's state as "".

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