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未指定为材质-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)
}

ReactJS上的材质UI：`evt.target.value`不适用于`RaisedButton`

1 个答案: