React - 动态更新新输入的总数

Question

我有三个数字类型的输入字段（受控输入以接受 [0-100] 范围内的数字）。和一个文本字段来显示总数。

输入字段：

<Input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={this.updateCode1} />

<Input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={this.updateCode2} />

<Input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={this.updateCode3} />

总字段：

<Text fontSize={14} weight={700}>{this.state.total}</Text>

更新代码功能：

updateCode1(value) {

    this.setState({ code1: value },

      () => {

        this.updateTotal();

      });

  }

updateCode2(value) {

     this.setState({ code2: value },

      () => {

        this.updateTotal();

      });

  }

updateCode3(value) {

     this.setState({ code3: value },

      () => {

        this.updateTotal();

      });

  }

更新总数：

updateTotal() {

    this.setState(prevState => ({

      total: (prevState.code1 + prevState.code2 + prevState.code3),

    }),

    () => {

      if (this.state.total !== 100) {

        this.setState({ isTotalInvalid: true });

      } else {

        this.setState({ isTotalInvalid: false });

      }

    });

  }

但它没有计算总数。有任何想法吗？谢谢！

Answer 1

value传递给的updateCodeX不是它自己的值，而是event内部的值event.target.value，并添加+以将状态值转换为数字：class Test extends React.Component {&nbsp; state = {&nbsp; &nbsp; code1: 40,&nbsp; &nbsp; code2: 40,&nbsp; &nbsp; code3: 40,&nbsp; &nbsp; total : 0&nbsp; }&nbsp;&nbsp;&nbsp; updateCode1 = e => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; code1: e.target.value&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; this.updateTotal();&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; updateCode2 = e => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; code2: e.target.value&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; this.updateTotal();&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; updateCode3 = e => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; code3: e.target.value&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; this.updateTotal();&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; updateTotal = () => {&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; &nbsp; total: (+prevState.code1 + +prevState.code2 + +prevState.code3),&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; if (this.state.total !== 100) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isTotalInvalid: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isTotalInvalid: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={this.updateCode1} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={this.updateCode2} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={this.updateCode3} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Total Field:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span fontSize={14} weight={700}>{this.state.total}</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>);&nbsp; &nbsp; }&nbsp; }ReactDOM.render( < Test / > , document.querySelector('#test'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="test"></div>

Answer 2

您可以使用一个处理程序一次性完成，如下所示：一个工作的plnkr&nbsp; handleInput = (e) => {&nbsp; &nbsp; const key = e.target.name;&nbsp; &nbsp; if (!key) { return; }&nbsp; &nbsp; const value = e.target.value ? parseFloat(e.target.value) : 0;&nbsp; &nbsp; const oldValue = this.state[key] ? this.state[key] : 0;&nbsp; &nbsp; const total = (this.state.total - this.state[key]) + value;&nbsp; &nbsp; console.log('key: ', key, ' value: ', value, ' total: ', total);&nbsp; &nbsp; this.setState({ [key]: value, total })&nbsp; }