react學習筆記(三)數據雙向綁定&條件渲染

react雙向數據綁定

/react中沒有直接的雙向綁定，必須通過手動傳值和事件監聽實現雙向綁定。/
綁定

 <input value={this.state.txt} onChange={this.txtChange}/>
 <p>{this.state.txt}</p>

onchange事件,可以獲取到輸入值

   txtChange = e=>{
        this.setState({
            txt:e.target.value
        });
        console.log(e.target.value);
    }

react條件渲染

react中使用三目運算符進行數據渲染
這是一組使用條件渲染的數據

{/* 對於多選框綁定布爾值，需要傳遞checked屬性 */}
                <input type="checkbox" checked={this.state.show} onChange={this.switchChange}
                />開始
                {/* react模板中不能直接渲染布爾值 */}
                <p>{this.state.show?"true":"false"}</p>

                {/* react模板中使用三目運算符進行條件渲染 */}
                {this.state.show?(<h1>正在營業</h1>):(<p>停止營業</p>)},
				{this.state.show?(<h1>打開</h1>):(<p>關閉</p>)},

onchange事件

	switchChange =e=>{
		 this.setState({
			 show:e.target.checked,
			 })
	}

頁面渲染