Saya sangat bingung. Saya mencoba tutorial ini https://material-ui.com/components/radio- tombol/#radiogroup. Tetapi setiap kali saya mengklik tombol radio, itu tidak terisi.

Saya memeriksa di handleFunctions jika status akan disetel. Dan ya, itu mengatur status baru dengan benar. Jadi saya tidak tahu di mana kode saya salah.

Terima kasih atas semua jawaban

Ini kode saya:

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

Elemen AuthenticationForm adalah pembungkus untuk mendesain kotak dialog untuk bagian aplikasi saya ini.

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

0
thhan 17 Januari 2021, 16:53

2 jawaban

Jawaban Terbaik

Ubah saja handlePackage menjadi ini:

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

Dan grup Radio untuk ini:

<RadioGroup name="package" value={this.state.form.package} onChange={this.handlePackage}>
1
b3hr4d 17 Januari 2021, 14:34

Objek status baru Anda tidak cocok dengan status awal, properti package hilang.

Peristiwa onClick mengembalikan value dari tipe string.

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>
2
hotpink 17 Januari 2021, 14:28