用React隐藏组件

我的代码中有几个反应类。当应用程序大火时，用户呈现这样的：用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>

的结果状态工作，因为当我点击上面的按钮它原来的状态，从虚假到真实的。然后返回输入字段下方。但我宁愿它取代上面的输入字段。这怎么能实现呢？

在总结

，一旦用户输入用户名和电子邮件，并点击提交，我想要的代码来渲染页面，而不是输入字段上，而不是下面

来源

2016-11-10 The worm

您render()内声明的变量你的输出方法：

let output;

^{注：使用var如果你不支持ES6。}

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

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

来源

2016-11-10 11:50:01

我需要伟大的，到底是什么！ –

虽然我还有一个更快的问题。在呈现第二个输出结果后说，如果我想在此之后再呈现另一个东西，该怎么办？即状态已经改变，它会呈现一个新的页面，但如果我想在该状态下做其他事情并重新渲染其他内容，该怎么办？添加一个else if不起作用，如果工作正常（即一旦它发现某事是真的，它会跳出） –

听起来像是你要打开输入元素分成单独的<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> 
);

来源

2016-11-10 11:50:37 Joshua

用React隐藏组件

回答

相关问题