ReactJS上的材質UI：`evt.target.value`不適用於`RaisedButton`

Question

我試圖通過按鈕單擊（用於更改狀態）提交一個值。它工作正常，如果我只是使用HTML input元素。但是，如果我使用Material UIRaisedButton，我根本無法傳遞值。請幫我指出我做錯了什麼。

這就是所謂的按一下按鈕的功能：

changeGameStatus = (evt) => { 
    let status = "" 
    switch (evt.target.value) { 
     case "Start": 
      status = "in-progress" 
      break 
     default: 
      status = "ready" 
      break 
    } 

    this.setState({ 
     game: { 
      status: status 
     } 
    }) 

    /*when using <RaisedButton>, this.state.game.status returns "undefined"*/ 
    console.log('new status:' + this.state.game.status) 
} /* END changeGameStatus */ 

按鈕裏面render()：

/*this one does not send a value at all*/ 
<RaisedButton onClick={this.changeGameStatus} value="Start" label="Start" primary={true} /> 

/* this one works, but the look is not supported by material-ui*/ 
<input type="button" onClick={this.changeGameStatus} value="Start" /> 

Answer 1

的onClick沒有被指定爲一種材料的UI RaisedButton並且因爲財產它是一個反應組件，您將提供給提出的按鈕的任何屬性傳遞給該組件的道具。如果指定了onclick，則在RaisedButton組件中處理它的方式將確定您爲事件獲得的值。既然是沒有定義，你是剛剛從中你不會得到價值

您需要手動將它傳遞給函數

<RaisedButton onClick={this.changeGameStatus.bind(this, "Start")} value="Start" label="Start" primary={true} /> 

或

<RaisedButton onClick={() => this.changeGameStatus("Start")} value="Start" label="Start" primary={true} /> 

和事件使用它就像

changeGameStatus = (value) => { 
    let status = "" 
    switch (value) { 
     case "Start": 
      status = "in-progress" 
      break 
     default: 
      status = "ready" 
      break 
    } 

    this.setState({ 
     game: { 
      status: status 
     } 
    }) 

    /*when using <RaisedButton>, this.state.game.status returns "undefined"*/ 
    console.log('new status:' + this.state.game.status) 
}