我有一个使用redux-form设置的表单来提供初始值(尽管它也处理这些值,以便它们也可以在redux存储中进行更改),如下所示。
但是我的复选框无法与之交互。它们始终处于检查状态(这是根据提供的模型得出的初始值)
我的渲染方法:(我从this documentation复制了renderCheckbox。
render() {
const {classes} = this.props;
const renderTextField = ({input, label, meta: { touched, error }, ...custom}) => (
<TextField
error={touched && error}
{...input}
{...custom}
/>
);
const renderCheckbox = ({ input, label }) => (
<Checkbox
label={label}
checked={input.value ? true : false}
//onCheck={input.onChange} // I had this enabled but it didn't do anything
/>
);
const { submit, handleSubmit, pristine, reset, submitting } = this.props;
return (
<form onSubmit={handleSubmit(this.props.sendSubmit)}>
<Paper className={classes.sectionPaper}>
<CardContent>
<Typography className={classes.sectionHeader}>Artifact Info</Typography>
<Divider />
</CardContent>
<CardContent>
<Grid fluid>
<Row>
<Col xs={12} lg={4}>
<CardContent className={classes.artifactCardContent}>
<Typography>Artifact Name</Typography>
<Divider />
<Field
fullWidth
name="Name"
component={renderTextField}
label="Artifact Name"
/>
</CardContent>
</Col>
<Col xs={6} lg={1}>
<CardContent className={classes.artifactCardContent}>
<Typography>Mythic?</Typography>
<Divider />
<Field
name="Mythic"
component={renderCheckbox}
label="Mythic"
/>
</CardContent>
</Col>
</Row>
</Grid>
</CardContent>
</Paper>
</form>
);
编辑:找到答案。问题出在material-ui @ next和material-ui v1.0之间,他们更改了复选框以始终使用checked
(基于初始值),而使用defaultChecked
作为默认值。