React学习笔记2
笔记（2019.6.14）
JSX
JSX绑定属性需要注意！
- class要写为className
- for要写为htmlFor
- 行内样式格式： style={{ “color”：“blue” }} （也可把style作为对象写在state中，通过style={ this.state.style }引用）
- 单标签要封闭
引入本地图片
方法1
import img1 from ‘./assets/images/1.png’
通过<img src={logo} />引入
方法2
<img src={require(‘./assets/images/1.png’)} />
循环数据
注意加Key
render() {
let theList = this.state.list.map(function(value , key){
return <li key={key}>{value}</li>
})
return (
<div>
{/* 可以这样*/}
<ul>
{theList}
</ul>
<hr />
{/* 还可以这样*/}
<ul>
{
this.state.list3.map(function(value,key){
return <li key ={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
事件处理
方法1
使用bind（this）改变this指向
getData（）{
alter(this.state.name)
}
...
<button onClick={this.getData.bind(this）}>获取名字1</button>
方法2
在构造函数里bind
constructor(props) {
super(props);
this.state = {
name:'Tommy',
this.getData= this.getData.bind(this)
}
...
<button onClick={this.getData）}>获取名字2</button>
方法3
箭头函数
getData =（）=>{
alter(this.state.name)
}
执行方法传值
this.setName.bind(this,value)}
setName =(newname)=>{
this.setState({
name:newname
})
}
...
<button onClick={this.setName.bind(this,'new Tommy')}>
click
</button>
setState
改变state的值
change =()=>{
this.setState({
name:'changed Tommy'
})
}
获取表单值
- 对input设置
onChange监听每次输入框内的变化 - 通过
e.target.value将获取到的值setState赋值给state中的属性 - 再通过点击按钮获取state中属性的值
也可以用ref来操作
使用<input ref="username" onChange={this.inputChange} />
在inputChange中使用this.refs.username.value也可以获取到input的值
获取表单checkbox的值
handelBox =(key)=>{
var hobby =this.state.hobby
hobby[key].checked = !hobby[key].checked
this.setState({ hobby:hobby });
}
...
爱好：
{
this.state.hobby.map((value ,key)=>{
return (
<span key={key}>
{value.title}<input type="checkbox" checked={value.checked} onChange={this.handelBox.bind(this,key)} />
</span>
)
})
}
约束性组件&非约束性组件
- 非约束性组件：
<input type="text" defaultValue ="hello"/>其中的defaulyValue就是原始DOM中的value属性，REact完全不管理输出的过程。 - 约束性组件：
<input value={this.state.username} type="text" onChange="{this.setInput}" />
这里的value不再是写死的值，它是this.state.username，这个是由this.setInput管理的。
虽然onChange会导致重新渲染，但是React会优化这个渲染过程