Material UI 在 ReactJS 上：`evt.target.value` 不适用于 `RaisedButton`

Question

我正在尝试通过单击按钮提交一个值（用于更改状态）。如果我只使用 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" />

Answer 1

onClick 未指定为属性用于 material-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)
}

Material UI 在 ReactJS 上：`evt.target.value` 不适用于 `RaisedButton`

Material UI on ReactJS: `evt.target.value` not working for `RaisedButton`

javascript

onclick

reactjs

material-ui