Как установить флажок Material UI вручную? - PullRequest
Новая
       24

Как установить флажок Material UI вручную?

0 голосов
/ 14 июня 2019

Я пытаюсь установить флажок в componentDidUpdate, установив для «флажка» значение true, но оно не работает.

Мое состояние хранится в избыточном, я обновляю состояние флажка в onChange () и в componentDidUpdate, я проверяю, является ли значение состояния истинным или ложным, на основании которого я добавляю и удаляю атрибут «флажок». но это не похоже на работу 

    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));

Цель состоит в том, чтобы установить значение по умолчанию для флажка.

Я попытался добавить атрибут «флажок» непосредственно в свой компонент-флажок, например 

<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>

это проверяет флажок, но он зависает, пользователь теряет возможность переключать флажок,

1 Ответ

1 голос
/ 14 июня 2019

Использовать значение и проверено. 

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>
...