javascript - 使用 React 隐藏组件

Question

我的代码中有几个 React 类。 当应用程序启动时，用户会看到:

<div>
    <h1 className="headings" id="heading"> Football </h1>
      <input type="text" placeholder="name" />
      <input type="email" placeholder="use noths email" />
      <input type="submit" onClick={() => this.handleClick()}/>
      { this.state.results ? <Decision /> : null }
        <Thanks />
 </div>

结果状态有效，因为当我单击上面的按钮时，它会将状态从 false 变为 true。 然后返回输入字段下方。但我宁愿它取代上面的输入字段。如何实现？

总而言之，一旦用户输入用户名和电子邮件并点击提交，我希望代码呈现在页面上而不是输入字段的下方

Answer 1

在 render() 方法中将输出声明为变量:

let output;

^{注意:如果您不支持 ES6，请使用 var。}

然后使用条件语句填充变量:

if (this.state.results) {
  output = <Decision />;
}
else {
  output = (
    <div>
      <input type="text" placeholder="name" />
      <input type="email" placeholder="use noths email" />
      <input type="submit" onClick={() => this.handleClick()}/>
    </div>
  )
}

现在只需在 render() 方法的 return 语句中返回 output:

return (
  <div>
    <h1 className="headings" id="heading"> Football </h1>
    {output}
    <Thanks />
  </div>
)