javascript - ReactJS上的Material UI:`evt.target.value`不适用于`RaisedButton`

我正在尝试通过单击按钮（用于更改状态）来提交值。如果我仅使用HTML input元素，则效果很好。但是，如果使用Material UI RaisedButton，则根本无法传递值。请帮助我指出我做错了什么。

单击按钮时调用的函数：

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

最佳答案

没有将onClick指定为Material-ui RaisedButton的属性，并且由于它是React组件，因此您提供给凸起按钮的任何属性都将作为道具传递给该组件。如果指定了onclick，则在RaisedButton组件中处理onclick的方式将确定事件获得的值。由于未定义，因此您只是在获取事件，而不会从中获取价值

您需要手动将其传递给函数

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