用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隱藏組件

回答

相關問題