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

页面渲染