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