javascript - React - 如何使只有一个增量函数 setState 多个变量？

Question

我怎样才能简化这段代码，这样我就不需要为每个数量变量使用单独的增量函数？

有没有办法传递参数？我还必须为每个数量变量添加递减函数。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    // Define data above render()
    constructor(){
      super(); 

      this.state = {
        quantity1: 0,
        quantity2: 0,
        quantity3: 0,
        quantity4: 0,
        quantity5: 0,
        quantity6: 0,
      }      

    }

    onChange (event) {
      this.setState({ value: event.target.value })
    }

    IncrementItem = () => {
      this.setState({ quantity1: this.state.quantity1 + 1 });
    }

    IncrementItem2 = () => {
      this.setState({ quantity2: this.state.quantity2 + 1 });
    }

    IncrementItem3 = () => {
      this.setState({ quantity3: this.state.quantity3 + 1 });
    }

    render() {
        // Show data in React expression.
        return( 
            <div>
                Server name: <input type="text" value={this.state.value} onChange={event => this.onChange(event)} /><br></br>
                <br></br>

                 Server: {this.state.value}<br></br>
                 <button onClick={this.Reset}>Reset</button>

                  <table>
                    <tr>
                      <td>Item1</td>
                      <td>0.99</td>
                      <td><button onClick={this.IncrementItem}>+</button> <button onClick={this.DecreaseItem}>-</button></td>
                      <td>{this.state.quantity1}</td>
                    </tr>
                    <tr>
                    <tr>
                      <td>Item2</td>
                      <td>0.99</td>
                      <td><button onClick={this.IncrementItem2}>+</button> <button onClick={this.DecreaseItem2}>-</button></td>
                      <td>{this.state.quantity2}</td>
                    </tr>
                    <tr>
                  </table>
            </div>
        );     
    }
}

Answer 1

您可以使用与 onChange 函数相同的方法，即根据调用该函数的元素确定属性名称。

像这样:

increment = (propName) => {
    this.setState(prevState => ({[propName]: ++prevState[propName]}))
}

并使用适当的参数调用它，您可以使用bind:

<button onClick={this.increment.bind(this, 'quantity1')}>+</button>

或者像这样:

<button onClick={() => this.increment('quantity1')}>+</button>