时间戳

首页 > 解决方案 > 在 React 事件处理程序中使用参数来操纵特定状态

javascript - 在 React 事件处理程序中使用参数来操纵特定状态

问题描述

我的状态如下所示：

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

我正在尝试编写一个 eventHandler 函数来接受参数“值”，这样我就可以将相同的函数作为道具传递给几个按钮，这些按钮将根据提供的参数设置状态。

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/>

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

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

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

|

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

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

谢谢！

标签： javascriptreactjs

解决方案

从您的代码中，我认为这就是您想要的。控制台日志只是为了让您可以看到状态的变化。

这里的工作示例。

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);

推荐阅读