在受控组件状态下存储多个无线电组的值的最佳方法是什么？

Question

React.我正在构建一个多步骤表单，在原始渲染方法的State和Switch语句中使用步计数器来显示显示的组件。类似于 https://www.youtube.com/watch?v=zT62eVxShsY 教程。我还通过 props 存储用户在状态中输入的所有值。

有一个页面，用户打算从多个radioGroups的 1,2,3 中选择一个评级，以从相应的问题中选择值。就像调查一样！这些radioGroups根据用户决定填写的表单而变化。

我想知道将radioGroups中的值存储到状态中的最佳方法，以便我可以在以后的阶段/步骤中解构它们。

到目前为止，我有以下代码(基本上只是 UI(。我已经删除了大部分radioGroups以简化为此目的的代码，还有数百个要添加。请原谅复制粘贴下方的可怜缩进不知何故是一种痛苦

import React, { Component } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar/AppBar";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import RaisedButton from "material-ui/RaisedButton";
import RadioGroup from "@material-ui/core/RadioGroup";
import Radio from "@material-ui/core/Radio";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import ActionFavorite from "material-ui/svg-icons/action/favorite";
import ActionFavoriteBorder from "material-ui/svg-icons/action/favorite-border";
export class LessonOne extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };
  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
  handleChange = (event, index, value) => this.setState({ value });
  render() {
    return (
      <MuiThemeProvider>
        <React.Fragment>
          <AppBar title="Select Ratings" />
          <div style={{ padding: 50 }}>
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <h1>Lesson 01_105CPL(H) Effects of Controls</h1>
              </Grid>
              <Grid item xs={12}>
                <h3>Lesson Content (Elements & Performance Criteria)</h3>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 32 }}>
                Condition 1
              </Grid>
              <Grid item>
                <RadioGroup
                  name="C2.1(a)"
                  defaultValue={this.formRating({ rate })}
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    value="1"
                    control={<Radio color="primary" />}
                    label="1"
                    labelPlacement="Top"
                  />
                  <FormControlLabel
                    value="2"
                    control={<Radio color="primary" />}
                    label="2"
                    labelPlacement="Top"
                  />
                  <FormControlLabel
                    value="3"
                    control={<Radio color="primary" />}
                    label="3"
                    labelPlacement="Top"
                  />
                  <FormControlLabel
                    value="N/A"
                    control={<Radio color="primary" />}
                    label="N/A"
                    labelPlacement="Top"
                  />
                </RadioGroup>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 10 }}>
                {" "}
                Condition 2
              </Grid>{" "}
              <Grid item>
                <RadioGroup
                  name="C2.2(b)"
                  defaultValue="3"
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="1"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="2"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="3"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="N/A"
                    control={<Radio color="primary" />}
                  />{" "}
                </RadioGroup>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 10 }}>
                Condition 3
              </Grid>{" "}
              <Grid item>
                <RadioGroup
                  name="C2.2(a)"
                  defaultValue="3"
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="1"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="2"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="3"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="N/A"
                    control={<Radio color="primary" />}
                  />{" "}
                </RadioGroup>
              </Grid>
              <Grid item xs={7} style={{ marginTop: 10 }}>
                {" "}
                Condition 4{" "}
              </Grid>{" "}
              <Grid item>
                <RadioGroup
                  name="H1.3(c)"
                  defaultValue="3"
                  style={{ display: "flex", flexDirection: "row" }}
                >
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="1"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="2"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="3"
                    control={<Radio color="primary" />}
                  />
                  <FormControlLabel
                    style={{ marginLeft: 16 }}
                    value="N/A"
                    control={<Radio color="primary" />}
                  />{" "}
                </RadioGroup>
              </Grid>
              <Grid item xs={10} style={{ marginTop: 50 }}>
                <RaisedButton
                  label="Previous"
                  secondary={true}
                  onClick={this.back}
                />
              </Grid>
              <Grid item xs={2} style={{ marginTop: 50 }}>
                <RaisedButton
                  label="Next"
                  primary={true}
                  onClick={this.continue}
                />
              </Grid>
            </Grid>
          </div>
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}
export default LessonOne;

Answer 1

对于每个RadioGroup，您都需要有一个onChange事件处理程序，还需要简化RadioGroup的名称(除了 (_( 下划线之外，不要使用任何特殊字符(，最好使用camelCase名称。

<RadioGroup
    name="C2_1_a" //Simplifies name, you can change to whatever you want
    defaultValue={this.formRating({ rate })}
    style={{ display: "flex", flexDirection: "row" }}
    onChange={this.radioHandler} //onChange handler
>
// Your radio buttons                
</RadioGroup>

radioHandler函数应该是，

radioHandler = (e) =>{
   this.setState({[e.target.name]:e.target.value});
}

访问选定的单选按钮，

{this.state.C2_1_a}