在 onClick 函数中设置状态

Question

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

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

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

如何正确抓取按钮的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

我建议您采用更简单的方法，例如这样

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 2

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

在你的渲染函数中：

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

在 handleClick:

handleClick(buttonId) { ... }

正如我在评论中所说，您可以选择将按钮分离到它自己的组件中。在这种情况下，您可以使用 this.props.id 之类的简单方法来获取 id.

的值

Answer 3

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

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

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

Answer 4

您将在 e.target.id

的 onClick 处理程序事件中找到您的元素 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 5

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

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

这篇文章帮助很大：

https://reactjs.org/docs/handling-events.html

在 onClick 函数中设置状态

set state in onClick function

javascript

onclick

setstate

reactjs