Блог

У меня проблема с моим formcontrollabel . Я хочу, чтобы переключатель был установлен по умолчанию, но свойство checked , похоже, не работает.

Я пробовал использовать логические операторы, просто указывая true в качестве аргумента, но, похоже, ничего не работает. Есть мысли?

Вот мой код :

 const styles = theme => ({
    root: {
        display: 'flex',
    },
    formControl: {
        margin: theme.spacing.unit * 3,
    },
    group: {
        margin: `${theme.spacing.unit}px 0`,
    },
});

class SelectPeriod extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedValue: 'daily'
        };
    }

    handleChange = (value) => {
        this.setState({selectedValue: value});
    };

    render() {
        const { classes} = this.props;
        return (
            <div>
                <FormControl component="fieldset" className={classes.formControl}>
                    <FormLabel component="legend">Time Period</FormLabel>
                    <RadioGroup
                        aria-label="TimePeriod"
                        name="timePeriod"
                        className={classes.group}
                        value={this.state.value}
                        onChange={this.handleChange}
                    >
                        <FormControlLabel value="daily" checked control={<Radio color="primary" />} label="Daily" />
                        <FormControlLabel value="weekly" control={<Radio color="primary" />} label="Weekly" />
                        <FormControlLabel value="monthly" control={<Radio color="primary" />} label="Monthly" />
                    </RadioGroup>
                </FormControl>
            </div>
        )
    }
}
SelectPeriod.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SelectPeriod);
  

1. В вашем <RadioGroup> вы передаете неправильное состояние (вы определили selectedValue , не value )

 <RadioGroup
  aria-label="TimePeriod"
  name="timePeriod"
  className={classes.group}
  value={this.state.selectedValue}
  onChange={this.handleChange}
>
  

(С помощью значения props в RadioGroup вы будете определять, какое поле радио будет выбрано.)

2. Я предполагаю, что у вас возникнет проблема с вашей функцией handleChange. Просто еще раз проверьте документацию material ui. https://material-ui.com/demos/selection-controls /