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 { state = { code1: 40, code2: 40, code3: 40, total : 0 } updateCode1 = e => { this.setState({ code1: e.target.value }, () => { this.updateTotal(); }); } updateCode2 = e => { this.setState({ code2: e.target.value }, () => { this.updateTotal(); }); } updateCode3 = e => { this.setState({ code3: e.target.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 }); } }); } render() { return ( <div> <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} /> Total Field: <span fontSize={14} weight={700}>{this.state.total}</span> </div>); } } 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>

我建議對您的代碼稍作改進，使用一個函數updateCode來更新 state 中的代碼：

 class Test extends React.Component { state = { code1: 40, code2: 40, code3: 40, total : 0 } updateCode = (e, k) => { this.setState({ [`code${k}`]: e.target.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 }); } }); } render() { return ( <div> <input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={e => this.updateCode(e, 1)} /> <input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={e => this.updateCode(e, 2)} /> <input type="number" defaultValue="40" min="0" max="100" onKeyPress={this.handleInput} onBlur={e => this.updateCode(e, 3)} /> Total Field: <span fontSize={14} weight={700}>{this.state.total}</span> </div>); } } 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

  handleInput = (e) => {
    const key = e.target.name;
    if (!key) { return; }

    const value = e.target.value ? parseFloat(e.target.value) : 0;
    const oldValue = this.state[key] ? this.state[key] : 0;
    const total = (this.state.total - this.state[key]) + value;
    console.log('key: ', key, ' value: ', value, ' total: ', total);

    this.setState({ [key]: value, total })
  }