javascript - 如何手动选中 Material UI 复选框？

Question

我试图通过将“checked”设置为 true 来检查 componentDidUpdate 中的复选框，但它不起作用。

我的状态存储在 redux 中，我更新“onChange()”中的复选框状态，在 componentDidUpdate 中，我根据添加和删除“checked”属性检查状态值是 true 还是 false。但这似乎不起作用

    import React, { Component } from "react";
    import { saveOptions, getOptions } from '../api'
    import { connect } from 'react-redux';
    import { setUploadeSettings } from '../actions/settings'

    import { Button, Checkbox, FormControl, TextField, withStyles } from '@material-ui/core/';

    const styles = theme => ({
        root: {
            padding: theme.spacing(2)
        },
        button: {
            marginTop: theme.spacing(1)
        }
    })


    class UploadSettings extends Component{

        async componentDidMount(){
            const settingsFields = [...this.form.elements].map(i => i.name).filter(i => i)
            let savedOptions = await getOptions( { option_names: settingsFields } )
            savedOptions = savedOptions.data.data;
            const reduxState = {} 
            savedOptions.forEach(i =>  reduxState[i.option_name] = i.option_value );
            this.props.setUploadeSettings(reduxState)
        }

        componentDidUpdate(prevProps){
            if(prevProps.uploadSettings !== this.props.uploadSettings){
                [...this.form.elements].forEach(i => {
                    if(i.name === "convert_web_res") 
                       this.props.convert_web_res ? i.setAttribute("checked", true) : i.removeAttribute('checked') //<- This Doesn't Seem to work
                    i.value = this.props.uploadSettings[i.name]
                })
            }
        }

        handleSubmit = async  (e) => {
            e.preventDefault();
            try{
                const formData = new FormData(e.target);
                const elements = [...e.target.elements]
                const eleIndex = elements.findIndex(i => i.name === 'convert_web_res')
                const checked = elements[eleIndex].checked;
                formData.set('convert_web_res', checked);
                await saveOptions(formData)
            } catch(e){
                console.error(e)
            }
        }

        render(){
            const { classes, uploadSettings, setUploadeSettings } = this.props;
            return(
                <div className={classes.root}>
                    <form onSubmit={this.handleSubmit} ref={(form) => this.form = form}>
                        <FormControl>
                            <label>
                                <Checkbox 
                                    color="primary" 
                                    name="convert_web_res"
                                    onChange={(e) => {
                                        const state = uploadSettings;
                                        state.convert_web_res = e.target.checked
                                        setUploadeSettings(state)
                                    }}
                                /> Convert Web Resolution
                            </label>
                            <TextField
                                defaultValue = {uploadSettings.resolution}
                                id="resolution"
                                name="resolution"
                                label="Resolution"
                                margin="normal"
                            />
                            <TextField
                                defaultValue = {uploadSettings.dpi}
                                id="dpi"
                                name="dpi"
                                label="DPI"
                                margin="normal"
                            />
                            <Button type="submit" variant="contained" color="primary" className={classes.button}>
                                Save
                            </Button>
                        </FormControl>
                    </form>
                </div>
            )
        }
    }

    const mapStateToProps = state => {
        return {
          uploadSettings: state.settings.upload_settings
        }
      }

      const mapDispatchToProps = dispatch => {
        return {
            setUploadeSettings: settings => dispatch(setUploadeSettings(settings))
        }
      }

      export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(UploadSettings));

目标是设置复选框的默认值。

我尝试直接在我的复选框组件上添加“checked”属性，就像这样

<label>
    <Checkbox 
        color="primary" 
        name="convert_web_res"
        checked={uploadSettings.convert_web_res === "true" ? true : false}
        onChange={(e) => {
              const state = uploadSettings;
              state.convert_web_res = e.target.checked
              setUploadeSettings(state)
         }}
      /> Convert Web Resolution
</label>

这会检查复选框，但它会被卡住，用户失去了切换复选框的能力，

Answer 1

使用值(value)并检查。

handleChange = event => {
  // fire redux action
  this.props.setUploadeSettings({ convert_web_res: event.target.checked });
};

<label>
<Checkbox 
    color="primary" 
    name="convert_web_res"
    value={'Convert Web Resolution'}
    checked={this.props.uploadSettings.convert_web_res}
    onChange={(e) => this.handleChange(e)}
  /> Convert Web Resolution
</label>