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会优化这个渲染过程
React生命周期
componentDidMount()
方法会在组件已经被渲染到 DOM 中后运行
可以在这里操作一下localStorage
父子组件间传值
React中的组件
组件解决了html标签构建应用的不足,我们就可以自己定义一些组件,使用组件的好处在于把公共的功能单独抽离成一个文件作为一个组件,哪里需要用,就在哪里引入。
父传子
- 在调用子组件的时候定义一个属性,
<Child msg='父消息'></Child>
- 在子组件中使用
this.props.msg
获得父组件传来的值,这里msg名字要一致
父组件不仅仅可以传值给子组件,还可以传方法,可以用
<Child fn={this.fn}></Child>
在子组件中 通过this.props.fn
就可以执行啦~~
还可以传整个父组件,使用
<Child parent(自定义)={this}></Child>
,子组件可以通过this.props.parent...
就可以使用父组件所有的属性和方法了
父组件主动获取子组件的数据
- 调用子组件的时候,指定ref的值
<Child ref="child"></Child>
- 通过
this.refs.child
获取整个子组件实例
子传父
- 可以通过上面的父传子把所有父组件传给子组件的办法,提前在父组件中创建一个方法如getChildData,留给子组件使用。在子组件中通过
this.props.parents.getChildData.bind(this,'子组件值')
,传递给父组件
笔记(2019.6.15)
父组件给子组件传值
defaultProps
父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值
Child.defaultProps={
title:'默认标题'
}
当父组件没有传来值时,会默认使用defaultProps中定义的值
propTypes
验证父组件传值的类型合法性
import PropTypes from 'prop-types'
...
Child.propTypes ={
title:PropTypes.string
}
注意PropTypes和propTypes的书写格式~