Javascript 在onClick函数中设置状态

我的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>

handleClick（）{
var buttons=document.getElementsByTagName（“按钮”）；
var buttonsCount=buttons.length；
对于（变量i=0；i{
this.setState（{clickedSubmit:this.id}）；
console.log（this.state.clickedSubmit）；//返回未定义的
};
}
}
//在渲染中
提交
生成散列

我建议您采用一种更简单的方法，类似这样的方法

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>

handleClick1（）{
var buttons=document.getElementsByTagName（“按钮”）；
var buttonsCount=buttons.length；
设id=1；
对于（变量i=0；i{
this.setState（{clickedSubmit:id}）；
console.log（this.state.clickedSubmit）；//返回未定义的
};
}
}
handleClick2（）{
var buttons=document.getElementsByTagName（“按钮”）；
var buttonsCount=buttons.length；
设id=2；
对于（变量i=0；i{
this.setState（{clickedSubmit:id}）；
console.log（this.state.clickedSubmit）；//返回未定义的
};
}
}
//在渲染中
提交
生成散列

这种方法的好处是，将来当你的按钮数增加时，你的代码应该是模块化的，这样就可以很容易地向你的应用程序添加新功能

---

希望这有帮助

我建议您采用一种更简单的方法，类似这样的方法

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>

handleClick1（）{
var buttons=document.getElementsByTagName（“按钮”）；
var buttonsCount=buttons.length；
设id=1；
对于（变量i=0；i{
this.setState（{clickedSubmit:id}）；
console.log（this.state.clickedSubmit）；//返回未定义的
};
}
}
handleClick2（）{
var buttons=document.getElementsByTagName（“按钮”）；
var buttonsCount=buttons.length；
设id=2；
对于（变量i=0；i{
this.setState（{clickedSubmit:id}）；
console.log（this.state.clickedSubmit）；//返回未定义的
};
}
}
//在渲染中
提交
生成散列

这种方法的好处是，将来当你的按钮数增加时，你的代码应该是模块化的，这样就可以很容易地向你的应用程序添加新功能

---

希望这有帮助

我建议稍微改变调用handleClick的方式，为buttonId传入一个参数

在渲染函数中：

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

---

正如我在评论中所说，您可以选择将按钮分离到它自己的组件中。在这种情况下，您可以使用类似于

this.props.id

的简单方法来获取id的值。

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

在渲染函数中：

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

---

正如我在评论中所说，您可以选择将按钮分离到它自己的组件中。在这种情况下，您可以使用类似于

this.props.id

的简单方法来获取id的值。

您可以通过使用

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
单击EDID:-1，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
const id=event.target.id；
这是我的国家({
单击edid:id，
});
}
render（）{
返回(
单击id:{this.state.clickedId}
自闭症
Qwe
);
}
}

---

演示：

您可以使用

事件获取按钮的
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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
单击EDID:-1，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
const id=event.target.id；
这是我的国家({
单击edid:id，
});
}
render（）{
返回(
单击id:{this.state.clickedId}
自闭症
Qwe
);
}
}

---

演示：

如果onClick处理程序是

e.target.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>

handleClick=（e）=>{
this.setState（{clickedSubmit:e.target.id}，（）=>{
console.log（this.state.clickedSubmit）
});
}
//在渲染中
提交
生成散列

如果onClick处理程序是

e.target.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>

handleClick=（e）=>{
this.setState（{clickedSubmit:e.target.id}，（）=>{
console.log（this.state.clickedSubmit）
});
}
//在渲染中
提交
生成散列

您可以尝试此操作，甚至可以将id更改为要传递给函数的其他参数

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

this.handlefunction（id，e）}>删除行
删除行

这篇文章有很大帮助：

---

您可以尝试此操作，甚至可以将id更改为要传递给函数的其他参数

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

this.handlefunction（id，e）}>删除行
删除行

这篇文章有很大帮助：

---

您可以使用

this.props.id

^访问值实际上，要使用

this.props.id

您必须为按钮创建一个组件，这可能超出您的期望。您可以使用

this.props.id

^访问值实际上，要使用

this.props.id

，您需要