单击按钮渲染组件

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.