[react代码片段] 保存input数据 事件绑定的基本写法（箭头函数） 网络请求 componentDidMount 组件传值 ...state

保存input数据

class Login extends React.Component{
  //初始化状态
  state = {
    username:'', //用户名
    password:'' //密码
  }

  //保存表单数据到状态中 
  saveFormData = (dataType,event)=>{
    this.setState({[dataType]:event.target.value})
  }
 
  render(){
	return(
		用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
		密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
	)
  }
}

事件绑定的基本写法

<button onClick={this.add}>累加数据</button>

 add = () => {
  。。。
 } 

<button onClick={()=>this.add()}>累加数据</button>

 add(){
  。。。
 } 

<button onClick={this.add(2)}>累加数据</button>

 add = (arg) => () => {
  ...
 } 

<button onClick={() => this.add(2)}>累加数据</button>

 add = (arg) => {
  ...
 } 

网络请求 componentDidMount

  // 网络请求写在生命周期方法中
  async componentDidMount() {
    let ret = await getUserListApi()
    
    // 更新数据，视图更新
    this.setState({ users: ret }) 
  }

组件传值 …state

添加

  onSetUsers = user => {
    this.setState(state => ({ users: [ ...state.users,user] }))
  }
 

删除

 onDelUsers = cur_user => {
    let user =  this.state.users.filter((item) => item !== cur_user)
    this.setState({ users})
  }