我有一个带有单选按钮的表格。这是浏览器中的React加载项解释的屏幕。
我想知道为什么值value
为空,为什么没有onChange
函数会改变状态。在状态下,当我单击按钮时有变量checked: false
,状态应该改变,这将导致按钮样式的改变。
这是我负责创建单选按钮的组件。在这里,它从创建表单的组件传递道具。并且在此组件中,还应让状态负责checked
。
class RadioButton extends Component {
constructor() {
super();
this.state = {
checked: false,
};
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
const { checked } = this.state;
this.setState({
checked: !checked,
});
}
render() {
const {
value,
backgroundColor,
backgroundColorChecked,
borderColor,
height,
width,
...otherProps
} = this.props;
const { checked } = this.state;
return (
<InputGroup>
<Input
value={value}
checked={checked}
onChange={this.handleChange}
style={{
backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
borderColor: `${borderColor}`,
height: `${height}`,
width: `${width}`,
}}
className="Test__questions-radio"
{...otherProps}
/>
</InputGroup>
);
}
}
RadioButton.propTypes = {
backgroundColor: PropTypes.string,
value: PropTypes.string.isRequired,
borderColor: PropTypes.string.isRequired,
height: PropTypes.string.isRequired,
width: PropTypes.string.isRequired,
};
RadioButton.defaultProps = {
backgroundColor: '',
};
此组件传递给
const QuestionsAnswerForm = ({
onSubmit,
initialValues,
}) => (
<FinalForm
initialValues={initialValues}
onSubmit={onSubmit}
render={({ handleSubmit }) => (
<Form onSubmit={handleSubmit}>
<FinalField name="rate">
{({ input }) => (
<FormGroup>
<Radio
value="more-unaware"
type="radio"
backgroundColorChecked="#94657e"
backgroundColor="#fff9fc"
borderColor="#94657e"
height="2.375rem"
width="2.375rem"
{...input}
/>
</FormGroup>
)}
</FinalField>
<FinalField name="rate">
{({ input }) => (
<FormGroup>
<Radio
value="unaware"
type="radio"
backgroundColorChecked="#94657e"
backgroundColor="#fff9fc"
borderColor="#94657e"
height="2.0625rem"
width="2.0625rem"
{...input}
/>
</FormGroup>
)}
</FinalField>
</Form>
)}
/>
);
QuestionsAnswerForm.propTypes = {
onSubmit: PropTypes.func,
};
QuestionsAnswerForm.defaultProps = {
onSubmit: () => {},
};
为什么没有传递价值?为什么onChange函数不起作用?
答案 0 :(得分:1)
您不能通过单击取消选中单选按钮。您可以使用名称将它们分组在一起,以便一次只能选中该组中的一个。或者您可以像下面提供的示例中那样强迫他们真实或虚假。
这是给您的Code Sandbox示例。