ReactJSのMaterial UI： `RaisedButton`の` evt.target.value`が動作しません

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} /> 

と値を取得することはありません、そこからイベントを取得していますlikeを使用してください

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