问两个Material-UI单选按钮均已选中
EN

Stack Overflow用户

提问于 2020-09-21 17:55:20

回答 2查看 531关注 0票数 0

我有一个渲染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，所以我需要一些辅助。

redux-form

javascript

reactjs

material-ui

回答 2

Stack Overflow用户

发布于 2020-09-21 20:31:55

您需要在属性中显式地提供一个名称，以便系统知道这两个单选按钮属于同一组。API在其属性列表中的文档中写道：

name string用于引用控件的值的名称。如果你不提供这个属性，它会返回到一个随机生成的名字。

完整列表请参见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：，并为两个单选按钮设置相同的名称，例如name：'viamethod‘，否则您将获得随机名称，并且这两个单选按钮将不在同一组中。

票数 0

Stack Overflow用户

发布于 2021-06-07 21:49:03

首先，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>