更新 Child 中的状态

Question

我很困惑。我试用了本教程https://material-ui.com/components/radio-buttons/#radiogroup。但是每次我点击一个单选按钮时它都没有填满。

如果要设置状态，我检查了 handleFunctions。是的，它正确设置了新状态。所以我不知道我的代码哪里不对。

感谢所有回答

这是我的代码：

https://codepen.io/Y4roc/pen/MWjLWqz

class Registration extends Component {

    constructor(props) {
        super(props);
        this.handlePackage = this.handlePackage.bind(this);
        this.nextStep = this.nextStep.bind(this);
        this.state = {
            form: {
                package: 0
            },
            step: 0
        };
    }

    handlePackage(event) {
        this.setState({form: {package: event.target.value}})
    }

    nextStep() {
        this.setState((state) => {
            return {step: state.step++};
        })
    }

    render() {
        const steps = [
            'Package',
            'Account',
            'Invoice Address',
            'Frist Steps'
        ];


        return <AuthenticationForm lg={6} md={8} sm={10}><Grid item>
            <Typography component="h1" variant="h5" gutterBottom>
                Registration
            </Typography>
        </Grid>
            <Grid item>
                <form>
                    <Stepper alternativeLabel activeStep={this.state.step}>
                        {steps.map((label) => (
                            <Step key={label}>
                                <StepLabel>{label}</StepLabel>
                            </Step>
                        ))}
                    </Stepper>
                    {(this.state.step == 0) ? (<Grid container direction={"column"} spacing={2}>
                        <Grid item>
                            <FormControl component="fieldset">
                                <FormLabel component="legend">Choose your package</FormLabel>
                                <RadioGroup name={"package"} value={this.state.form.package} onChange={this.handlePackage}>
                                    <FormControlLabel value={1} control={<Radio/>} label={"Demo"}/>
                                    <FormControlLabel value={2} control={<Radio/>} label={"Bronze"} disabled/>
                                    <FormControlLabel value={3} control={<Radio/>} label={"Silber"} disabled/>
                                    <FormControlLabel value={4} control={<Radio/>} label={"Gold"} disabled/>
                                </RadioGroup>
                            </FormControl>
                        </Grid>
                        <Grid item>
                            <Button variant={"contained"} color={"primary"} onClick={this.nextStep}>
                                Next
                            </Button>
                        </Grid>
                    </Grid>) : null}
                </form>
            </Grid>
        </AuthenticationForm>;
    }
}

AuthenticationForm 元素是为我的应用程序的这一部分设计对话框的包装器。

class AuthenticationForm extends Component {
    render() {
        const {classes, lg, md, sm, children} = this.props

        return <Grid container spacing={0} justify="center" alignItems="center" direction="row"
                     className={classes.root}>
            <Grid item lg={lg} md={md} sm={sm}>
                <Grid container direction="column" justify="center" spacing={2}>
                    <Paper variant={"elevation"} className={classes.paper}>
                        {children}
                    </Paper>
                </Grid>
            </Grid>
        </Grid>;
    }
}

Answer 1

您的新状态对象与初始状态不匹配，它缺少 package 属性。

onClick 事件返回字符串类型的value。

const { FormControl, RadioGroup, FormControlLabel, Radio } = MaterialUI

class Registration extends React.Component {
  state = { form: { package: '1' }, step: 0 };

  handlePackage = (event) => {
    this.setState({ form: { package: event.target.value } });
  };

  render() {
    return (
      <FormControl component="fieldset">
        <RadioGroup
          name={"package"}
          value={this.state.form.package}
          onChange={this.handlePackage}
        >
          <FormControlLabel value={"1"} control={<Radio />} label={"Demo"} />
          <FormControlLabel value={"2"} control={<Radio />} label={"Bronze"} />
          <FormControlLabel value={"3"} control={<Radio />} label={"Silber"} />
          <FormControlLabel value={"4"} control={<Radio />} label={"Gold"} />
        </RadioGroup>
      </FormControl>
    );
  }
}

ReactDOM.render(<Registration />, document.getElementById('root'))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

Answer 2

只需将handlePackage 更改为：

handlePackage(event) {
    this.setState({form: { package: Number(event.target.value)}});
}

电台组对此：

<RadioGroup name="package" value={this.state.form.package} onChange={this.handlePackage}>

Answer 3

我想改一下

        this.state = {
            form: {
                package: 0
            },
            step: 0
        };

到

        this.state = {
            form: 1,
            step: 0
        };

可能会起作用。