条件渲染:
class组件+事件+组件嵌套+条件渲染
例如我们熟悉的table选项卡,
1:点击按钮显示对应的div,我们在按钮点击事件时通过.bind()方法改变this指向的同时,顺便传参(按钮的index),在事件函数中接受,设置state中的数据为传过来的index;
2:在组件嵌套的时候,通过属性传值,在子组件中接受数据,根据传过来的值(this.props.xxx)做判 断,根据不同的index,return不同的div
当然此处也可以在div元素的style属性值根据state中的数据做三目运算
列表渲染:
假设state中有一个数组arr:['apple','banana','orange','pear'],我们渲染成列表
<ul>{this.state.arr.map((v,i)=><li key={i}>{i+1}我喜欢吃-->{v}</li>)}</ul>
注意:浏览器解析时需要加上唯一值key,不然会一直报错
表单渲染:
注意:
1、表单中有value，那么用户将无法操作，变成只读的。解决办法2种 a:变成受控表单 用onchange b：非受控 defaultValue
2、表单中有checked(默认选中)，那么用户将无法操作，变成只读的。解决办法2种 a:变成受控表单 用onchange b：非受控 defaultChecked
3、表单中有selected，那么用户将无法操作，变成只读的。解决办法2种 a:变成受控表单 用onchange b：非受控 defaultSelected
4、如果要用submit提交 onsubmit事件写在form上面
input框:
<input type="text" name="user" value={this.state.user} onChange={this.change.bind(this)}/>
注意:我们将name设置为state中的数据名,可以通过事件触发源的name给不同的数据设置不同的值
change(ev){ // console.log(ev.target.name); this.setState({ [ev.target.name]:ev.target.value }) }
文本域:(同上)
单选框:(同上)
<input type="radio" checked={this.state.sex=='男'?true:false} onChange={this.change.bind(this)} name="sex" value="男"/>
select:(option下拉菜单)
<select name="select" onChange={this.change.bind(this)} value={this.state.select}> <option value="html">html</option> <option value="css">css</option> <option value="js">js</option> </select>
change(ev){ // console.log(ev.target.name); this.setState({ [ev.target.name]:ev.target.value }) }<span>{this.state.select}</span>
