Reactjs上的材料UI:`evt.target.value“不适用于``riseedbutton''

Question

我正在尝试通过单击按钮提交值(用于更改状态(。如果我只使用HTML input元素，它可以正常工作。但是，如果我使用材料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" />

Answer 1

onclick并未指定为材料 - UI升高的tur的属性，并且由于它是您提供给升高按钮的任何属性的React组件，都将其传递给组件。如果指定了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)
}