在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函數中設置狀態

回答

相關問題