在onClick函数中设置状态

我在我的反应表单中有2个提交按钮。我正在尝试使用onClick函数来获取单击按钮的ID，以便我可以指定如何处理每个按钮。我的onClick函数返回未定义的id的setState。我怎样才能正确抓住按钮的ID并设置状态？在onClick函数中设置状态

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>

来源

2017-05-22 user7674254

你可以用'这个访问值.props.id' –

^实际上，要使用'this.props.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>

来源

2017-05-23 06:06:38

简短，简单，只是我所需要的。使用e.target.id效果很好。谢谢！ – user7674254

如果你有答案，那么请接受它 –

我建议你去一个更简单的方法，这样的事情

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>

这种方法的好处是，在未来，当你的按钮数量的增加，然后在那个时候，你的代码应该是模块化的，这样很容易为您的应用程序添加新功能。

希望这会有所帮助！

来源

2017-05-22 18:52:01 zenwraight

这应该是好的？您可以复制一个函数，它使用缓慢的Web API调用来读取状态，并且这两个函数之间唯一动态的是id，您可以将它作为arg直接传递给onClick，例如：'onClick = {（）=> this .handleClick（'formSubmit'）}' –

我的意思很好，因为很显然，为了测试目的，他正在设置状态，但名称建议一个用于表单提交，另一个用于散列提交或计算散列，因此有两种不同的方法可以使它更容易处理所有的东西，而不是把一个嵌套的if的情况放在一个方法内 – zenwraight

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

在渲染功能：

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

在handleClick：

handleClick(buttonId) { ... }

正如我在发表我的意见，你有一个选择了分离按钮到它自己的组件。在这种情况下，您可以使用简单的this.props.id来获取id的值。

来源

2017-05-22 19:48:16

您可以通过使用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> 
    ); 
    } 
}

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

来源

2017-05-22 20:58:24 hinok

在onClick函数中设置状态

回答

相关问题