在onClick函数中设置状态

Question

我的反应表单中有2个提交按钮。

我正在尝试使用onClick函数来获取单击按钮的id，因此我可以指定如何相应地处理每个。

我的onClick函数返回未定义的setState的id。

我怎样才能正确抓住按钮的id并设置状态？

handleClick() {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    for (var i = 0; i < buttonsCount; i++) {
        buttons[i].onclick = (e) => {
            this.setState({clickedSubmit: this.id});
            console.log(this.state.clickedSubmit); //returns undefined
        };
    }
}

//in the render
<button id="formSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Submit</button>
<button id="hashSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Generate Hash</button>

Answer 1

在onClick处理程序e.target.id的情况下，您将找到您的元素ID

handleClick = (e) => {
  this.setState({ clickedSubmit: e.target.id },() => {
    console.log(this.state.clickedSubmit)
  });
}

//in the render
<button id="formSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Submit</button>
<button id="hashSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick}>Generate Hash</button>

Answer 2

我建议通过传入buttonId的参数来稍微改变你调用handleClick的方式。

在你的渲染功能：

<button onClick={() => this.handleClick('formSubmit')}>Submit</button>

在handleClick中：

handleClick(buttonId) { ... }

正如我在评论中发布的那样，您可以选择将按钮分离到其自己的组件中。在这种情况下，您将能够使用像this.props.id这样的简单来获取id的值。

Answer 3

我建议你采取更简单的方法，就像这样

handleClick1() {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    let id = 1;
    for (var i = 0; i < buttonsCount; i++) {
        buttons[i].onclick = (e) => {
            this.setState({clickedSubmit: id});
            console.log(this.state.clickedSubmit); //returns undefined
       };
  }
}

handleClick2() {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    let id = 2;
    for (var i = 0; i < buttonsCount; i++) {
        buttons[i].onclick = (e) => {
            this.setState({clickedSubmit: id});
            console.log(this.state.clickedSubmit); //returns undefined
       };
  }
}

//in the render
    <button id="formSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick1}>Submit</button>
    <button id="hashSubmit" className="btn btn-info" name="submitButton" onClick={this.handleClick2}>Generate Hash</button>

这种方法的好处是，将来当您的按钮数量增加时，那时您的代码应该是模块化的，这样可以很容易地为您的应用添加新功能。

希望这可以帮助！

Answer 4

您可以使用id获取按钮的event.target，如下所示：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clickedId: -1,
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const id = event.target.id;
    this.setState({
      clickedId: id,
    });
  }

  render() {
    return (
      <div>
        <h1>Clicked id: {this.state.clickedId}</h1>
        <button id="asd" onClick={this.handleClick}>Asd</button>
        <button id="qwe" onClick={this.handleClick}>Qwe</button>
      </div>
    );
  }
}

但是：ぁzxswい

Answer 5

你可以尝试这个，甚至将id更改为你要传递给你的函数的其他参数。

http://jsbin.com/yiqavav/1/edit?html,js,output

这篇文章有很大帮助：

<button onClick={(e) => this.handlefunction(id, e)}>Delete Row</button>
<button onClick={this.handlefunction.bind(this, id)}>Delete Row</button>