Question

我的州看起来像这样：

state={a:0,b:0,c:0}

我正在尝试编写一个接受参数'value'的eventHandler函数，这样我就可以将与prop相同的函数传递给几个基于提供的参数setState的按钮。

eventHandler =(value)=>{
this.setState({value:this.state.value+1})
}

<button onClick={this.eventHandler.bind(this,'a')}><button/>
<button onClick={this.eventHandler.bind(this,'b')}><button/>
<button onClick={this.eventHandler.bind(this,'c')}><button/>

这个想法是每个按钮接受具有不同参数的相同功能，但仅改变参数中传递的状态，而不改变其他参数。

如果将此函数作为prop组件传递给子组件并在那里分配和使用参数，我也会非常感兴趣。

<Parent click = {this.eventHandler.bind(this,'')}/>

|

<button onClick={click('b')}>

它不起作用，我不确定这是否正确。我感谢任何帮助和建议。

谢谢！

Answer 1

从您的代码中，我认为这就是您想要的。控制台日志就是这样，您可以看到状态更改。

工作示例here。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    variables: {
      a: 0,
      b: 1
    }
  };

  handleClick = val => {
    const prevVal = this.state.variables[val];

    this.setState(
      { variables: { ...this.state.variables, [val]: prevVal + 1 } },
      () => {
        console.log(this.state);
      }
    );
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={() => this.handleClick("a")}>click a</button>
        <button onClick={() => this.handleClick("b")}>click b</button>
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用React事件处理程序中的参数来操作特定状态

1 个答案: