两个Material-UI单选按钮均已选中
两个Material-UI单选按钮均已选中
提问于 2020-09-22 01:55:20
我有一个渲染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，所以我需要一些辅助。
回答 2
Stack Overflow用户
发布于 2020-09-22 04: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‘，否则您将获得随机名称，并且这两个单选按钮将不在同一组中。
Stack Overflow用户
发布于 2021-06-08 05: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63997607
复制相关文章
相似问题
腾讯云开发者
