时间戳

首页 > 解决方案 > React - SUM 状态值

reactjs - React - SUM 状态值

问题描述

编辑：我忘了说输入上的 onChange 不起作用，我如何告诉 onChange 它是组内的状态值？

几周前我开始学习 React。我想对组状态值求和，并且每次更改总值时也会发生变化。我正在使用材质 ui 来创建表单。问题是，如果我将状态值更改为 int，FormControlLabel 值将不起作用......作为字符串，总数无法按预期工作。以及每次更改选项时如何处理总更改？

提前致谢。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      total: 0,
      group: {
        feedingGroup: "3",
        bathingA: "3",
        bathingB: "3",
      }
    }
  }

  componentDidMount() {
    this.setState({ total: this.calculateTotal(this.state.group) });
  }

  calculateTotal = (values) => {
    return Object.entries(values).reduce((finalValue, [key, value]) => {
      return finalValue + value;
    }, 0);
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <FormControl component="fieldset" error="" className="">

          <RadioGroup aria-label="quiz" name="quiz" value={this.state.group.feedingGroup}
            onChange={(value) => { this.setState({ feedingGroup: (value.target.value) }); }}>
            <FormControlLabel value="0" control={<Radio />} label="Op1" />
            <FormControlLabel value="1" control={<Radio />} label="Op2" />
            <FormControlLabel value="2" control={<Radio />} label="Op3" />
            <FormControlLabel value="3" control={<Radio />} label="Op4" />
          </RadioGroup>

          <RadioGroup aria-label="quiz" name="quiz" value={this.state.group.bathingA}
            onChange={(value) => { this.setState({ bathingA: (value.target.value) }); }}>
            <FormControlLabel value="0" control={<Radio />} label="Op1" />
            <FormControlLabel value="1" control={<Radio />} label="Op2" />
            <FormControlLabel value="2" control={<Radio />} label="Op3" />
            <FormControlLabel value="3" control={<Radio />} label="Op4" />
          </RadioGroup>

          <Button type="submit" variant="outlined" color="primary" className="">
            Check Answer
        </Button>
          <FormHelperText>{this.state.total}</FormHelperText>
        </FormControl>
      </form>

    );
  }

}

export default App;

标签： reactjsforms

解决方案

如何铸造价值：

calculateTotal = (values) => {
  return Object.entries(values).reduce((finalValue, [key, value]) => {
    return finalValue + Number(value);
  }, 0);
}

推荐阅读