day20 笔记
一、课程回顾
- 事件(箭头函数、bind绑定)
- props(函数props、类this.props)
- state(setState)
- 组件通信之父传子
二、组件通信之子传父
const {changeOne } = this.props
const {msg} = this.state
return (
<div className='box'>
<h1>我是长子组件</h1>
<button onClick={changeOne.bind(this,msg)}>点击修改父组件内容的事件</button>
</div>
)
}
//组件一的修改事件
changeMsg(m){
console.log(m,'我是被子组件触发')
this.setState({
msg:m
})
}
<SonOne changeOne={this.changeMsg.bind(this)}></SonOne>
三、表单输入
//在jsx语法中 默认值 要用defaultValue去表示
//React中是单项数据流,如果我想要得到input输入框值的变化,那么我需要用onChange方法去实现,不能写成onchange
this.state={
userInfo:{
name:'',
pass:''
}
}
//用户名的change事件
changeName(e){
//解构
let {userInfo} = this.state
//取出input输入框的一个变化,把变化的值,赋值给变量
userInfo.name = e.target.value
//重新给state中的userInfo赋值
this.setState({
userInfo
})
}
//密码的change事件
changePass(e){
let {userInfo} = this.state
userInfo.pass = e.target.value
this.setState({
userInfo
})
}
//创建一个登录事件
login(){
let {userInfo} = this.state
//调取登录接口
/* axios({
url:'/login',
method:'post',
data:userInfo
})
.then(res=>{})
.catch(err=>{}) */
}
<div className='box'>
<h1>欢迎登录</h1>
<div>
请输入用户名:<input type="text" defaultValue='' onChange={this.changeName.bind(this)}/>
</div>
<h1>{userInfo.name}</h1>
<div>
请输入密码:<input type="text" defaultValue='' onChange={(event)=>this.changePass(event)}/>
</div>
<button onClick={this.login.bind(this)}>登录</button>
</div>
this.state = {
userInfo: { //登录和注册 入参的设置要与后端一致
name:'',
pass:'',
sex:0,
hobby:[],
job:'web',
email:'',
idx:'',
remark:'',
isGreen:false
}
}
//封装的公共的函数
changeInfo(e,type){
/* let {userInfo} = this.state
userInfo[type] = e.target.value
this.setState({
userInfo
}) */
//利用es6语法 对上述方式进行简化
this.setState({
userInfo:{
...this.state.userInfo,//取出所有的对象属性
[type]:e.target.value//根据不同input去重新赋值
}
})
}
//执行事件方法的时候,要用箭头函数,bind()这个方法它是隐式传参,除了传event还要传这个类型,实参会代替event
<div>
请输入用户名:<input type="text" defaultValue= {userInfo.name} onChange={(event)=>this.changeInfo(event,'name')}/>
</div>
<div>
请输入密码:<input type="text" defaultValue={userInfo.pass} onChange={(event)=>this.changeInfo(event,'pass')}/>
</div>
this.state={
userInfo:{
sex:'0'
}
}
<div>
请选择性别:
<input type="radio" defaultValue='0' checked={userInfo.sex ==='0'} name='sex' onChange={(event)=>this.changeInfo(event,'sex')}/>男
<input type="radio" defaultValue='1' checked={userInfo.sex ==='1'} name='sex' onChange={(event)=>this.changeInfo(event,'sex')}/>女
</div>
this.state={
userInfo:{
job:''
}
}
<div>
请选择你的工作:
<select defaultValue={userInfo.job} onChange={(event) => this.changeInfo(event, 'job')}>
<option value="" disabled>--请选择--</option>
<option value="aoye">专业熬夜一百年</option>
<option value="tuofa">专业脱发几十年</option>
<option value="web">大前端攻城狮</option>
<option value="all">全干攻城狮</option>
</select>
</div>
this.state={
userInfo:{
isGree:false
}
}
<div>
{/* 当我点击checkbox的时候,实际上不是变更value,变更的是checked的类型 */}
请同意我家协议:<input type="checkbox" checked={userInfo.isGree} onChange={(event) => this.changeInfo(event, 'isGree')}/>
</div>
//对onChange事件做条件判断
changeInfo(e, type) {
//type类型 我要进行一下判断,判断是取value 还是去checked
let value = ''
switch(type){
case 'isGree':
value = e.target.checked
break;
default:
value = e.target.value
}
//利用es6语法 对上述方式进行简化
this.setState({
userInfo: {
...this.state.userInfo,//取出所有的对象属性
[type]: value//根据不同input去重新赋值
}
})
}
this.state={
userInfo:{
hobby:[]
},
//设定一下爱好的数据,用来展示
hobbies: [//需要一个选中的状态
{
name: '吃吃',
value: 'eat',
checked: false
},
{
name: '睡觉',
value: 'sleep',
checked: false
},
{
name: '玩',
value: 'play',
checked: false
},
{
name: '敲代码',
value: 'study',
checked: false
}
]
}
{/* 循环遍历我的爱好 */}
{
hobbies.map((item, index) => {
return <span key={item.value}>
<input checked={userInfo.hobby.some(i=>i===item.value)} type="checkbox" onChange={(event) => this.changeInfo(event, 'hobby', index)} />{item.name}
</span>
})
}
changeInfo(e, type, index) {
// console.log(e,'事件')
// console.log(type,'type')
/* let {userInfo} = this.state
userInfo[type] = e.target.value
this.setState({
userInfo
}) */
// console.log(e.target.checked,'checkbox')
//type类型 我要进行一下判断,判断是取value 还是去checked
let value = ''
switch (type) {
case 'hobby':
//首先把选中的内容获取到,确定到它的索引位置
let { hobbies } = this.state
// console.log(hobbies[index].checked,index,'这个值是谁')
//对选中的状态进行取反
hobbies[index].checked = !hobbies[index].checked
//获取所有true的状态 利用filter方法过滤出我想要的结果(选中的状态)
let arr = hobbies.filter(item => item.checked)
//通过循环遍历映射 生成 之后只有value的新数组
value = arr.map(item => item.value)
console.log(value, '选中value数据')
//console.log(arr,'选中之后的数据')
break;
case 'isGree':
value = e.target.checked
break;
default:
value = e.target.value
}
//利用es6语法 对上述方式进行简化
this.setState({
userInfo: {
...this.state.userInfo,//取出所有的对象属性
[type]: value//根据不同input去重新赋值
}
})
}
四、ref
- React中快速获取dom节点的方法ref
- 第一种方法和vue很相像
<div>
请输入用户名:<input ref='nameRef' type="text"/>
</div>
//获取input的值
this.refs.nameRef.value
- 第二种方法(16版本以后才出现的 零bug,推荐这种使用放法)
constructor(){
super()
this.a = React.createRef()
}
<input type='text' ref={this.a} />
//取值的时候
this.a.current.内容