reactjs - 单击按钮渲染组件

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中根据answer的值使用state来决定是否渲染TriviaCard。