Question

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

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

我的id函数返回onClick的{{1}}未定义。

如何正确抓取按钮的setState并设置状态？

id

Answer 1

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

在渲染功能中：

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

在handleClick中：

handleClick(buttonId) { ... }

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

Answer 2

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

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

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函数中设置状态

5 个答案: