Redux表单Material-UI复选框不起作用

时间:2018-07-28 00:49:57

标签: reactjs redux material-ui redux-form

我有一个使用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作为默认值。

0 个答案:

没有答案