Question

我正在使用React-Redux构建一个琐事游戏应用程序，并且需要能够渲染一个TriviaCard组件，如果用户决定再次玩，它将启动一个新游戏。这是我的按钮......

所以，我有两个按钮，需要能够在我的handleSubmit函数中执行类似的操作......

<button onClick={this.handleSubmit} name="yes">Yes</button>
<button onClick={this.handleSubmit} name="no">No</button>

handleSubmit = (event) => {
    const answer = event.target.name
    if (answer === "yes") {
        return <TriviaCard />
    } else {
        //Do nothing...
    }
}

Answer 1

您可以将答案保存在组件的状态中，然后对TriviaCard组件使用条件渲染。这是一个例子：

class Game extends React.Component {
    state = { answer: '' }
    handleSubmit = (event) => {
        this.setState({ answer: event.target.name });
    }
    render() {
      <div>
        {this.state.answer === "yes" && <TriviaCard />}
        <button onClick={this.handleSubmit} name="yes">Yes</button>
        <button onClick={this.handleSubmit} name="no">No</button>
      </div>
    }
}

单击其中一个按钮时，组件的状态将更改，从而触发组件的重新呈现。然后在render中，状态用于根据TriviaCard的值确定是否呈现answer。

单击按钮渲染组件

1 个答案: