Question

我的代码中有几个反应类。当应用程序启动时，会向用户显示以下内容：

<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。然后返回输入字段下面。但我宁愿它取代上面的输入字段。怎么能实现呢？

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

下面

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>
  )
}

现在只需在output方法的render()声明中返回return：

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

Answer 2

听起来您想将输入元素转换为单独的<Form>组件并渲染

<div>
    <h1 className="headings" id="heading"> Football </h1>
    { this.state.results ? <Decision /> : <Form handleClick={ this.handleClick }/> }
    <Thanks />
</div>

表格类似于

const Form = props => (
    <div>
        <input type="text" placeholder="name" />
        <input type="email" placeholder="use noths email" />
        <input type="submit" onClick={this.props.handleClick}/>
    <div>
);

使用React隐藏组件

2 个答案: