javascript - Reactjs 使用相似的按钮将不同的属性传递给相同的函数？

Question

[菜鸟 react ]:我正在尝试做一些我认为很简单的事情，我有两个数字计数器，其中有按钮可以向它们添加一个数字。我希望按钮使用相同的数学函数，但传入分配给它们的属性。最终发生的事情是，它似乎将一个字符串值添加到 prop 值中，而不是进行数学运算，我不完全明白为什么。

简单的数学函数:

  addOne = (event) => {
    var { target: { name, value } } = event

    this.setState({
        [name] : value + 1
    });

    console.log("name: " + name + "\nvalue: " + value)

  }

其中一个按钮:

<button type="button" name="count2" value={this.state.count2} onClick={this.addOne} >Add One</button>

示例输出:

name: count2
value: 0
name: count2
value: 01
name: count2
value: 011
name: count2
value: 0111

JS fiddle :https://jsfiddle.net/Vallamost/pf7kys5e/2/

react 代码:

class ButtonReuse extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count1: 0,
      count2: 0,
    }
  }

  addOne = (event) => {
    var { target: { name, value } } = event

    this.setState({
        [name] : value + 1
    });

    console.log("name: " + name + "\nvalue: " + value)

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Counter 1: &nbsp;   <div>{this.state.count1}</div>
        <button type="button" name="count1" value={this.state.count1} onClick={this.addOne} >Add One</button>
        </label>
        <br/>
        <label>
          Counter 2: &nbsp;   <div>{this.state.count2}</div>
        <button type="button" name="count2" value={this.state.count2} onClick={this.addOne} >Add One</button>
        </label>
      </form>
    );
  }
}

ReactDOM.render(<ButtonReuse />, document.querySelector("#app"))

Answer 1

这是因为 JavaScript 的类型强制。按钮中的值实际上是一个字符串。因此，当您尝试执行 value + 1 时，JavaScript 会尝试通过在运行计算之前首先识别通用数据类型(字符串)来解决此问题。要解决此问题，只需不要使用按钮中存储的值，而只使用 state 本身。

class ButtonReuse extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count1: 0,
      count2: 0,
    }
  }

  addOne = (event) => {
    var { target: { name, value } } = event

    this.setState({
        [name] : this.state[name] + 1
    });

    console.log("name: " + name + "\nvalue: " + value)

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Counter 1: &nbsp;   <div>{this.state.count1}</div>
        <button type="button" name="count1" value={this.state.count1} onClick={this.addOne} >Add One</button>
        </label>
        <br/>
        <label>
          Counter 2: &nbsp;   <div>{this.state.count2}</div>
        <button type="button" name="count2" value={this.state.count2} onClick={this.addOne} >Add One</button>
        </label>
      </form>