react第二天

JS阶段事件绑定：<button onclick = '函数方法' >点击</button>

React是合成事件，会映射到原生标签上(调用合成事件，出现this指向丢失的问题) 注意：onClick需要大写，不能加括号

import React, { Component } from 'react'
 
export default class hello extends Component {
    fn(){
        console.log('点击了');
    }
  render() {
    return (
      <div>
          <button onClick={this.fn}>点击</button>
      </div>
    )
  }
}
类组件：处理this问题

方式1：模板里面使用bind将this绑定， on事件名 = {this.事件函数.bind(this)}
方式2：构造函数里面bind绑定
方式3：模板里面定义箭头函数，箭头函数里调用事件处理函数（注意：真正的事件函数是箭头函数，箭头函数里面调用了事件处理函数，因为箭头函数可以留存this的指向不变化）
方式4：定义事件函数的时候就定义箭头函数
import React, { Component } from 'react'
 
export default class app extends Component {
  constructor(){
    super()
    this.fn5 = this.fn5.bind(this)
  }
  fn1(){
    console.log('fn1');
    console.log(this);
  }
  fn2(){
    console.log('fn2');
    console.log(this);
  }
  fn3(){
    console.log('fn3');
    console.log(this);
  }
  fn4 =() =>{
    console.log('fn4');
    console.log(this);
  }
  fn5(){
    console.log('fn5');
    console.log(this);
  }
  render() {
    return (
      <div>
        <button onClick={this.fn1}>点击</button>  //会丢失this指向
        <button onClick={this.fn2.bind(this)}>点击fn2</button>
        <button onClick={()=>{this.fn3()}}>点击fn3</button>
        <button onClick={this.fn4}>点击fn4</button>
        <button onClick={this.fn5}>点击fn5</button>
      </div>
    )
  }
}
获取事件对象：

import React, { Component } from 'react'
 
export default class app extends Component {
  constructor(){
    super()
    this.fn5 = this.fn5.bind(this)
  }
  fn1(event){
    event.preventDefault()
    console.log(event);
    console.log('fn1');
    console.log(this);
  }
  fn2(event){
    event.preventDefault()
    console.log(event);
    console.log('fn2');
    console.log(this);
  }
  fn3(event){
    event.preventDefault()
    console.log(event);
    console.log('fn3');
    console.log(this);
  }
  fn4 =(event) =>{
    event.preventDefault()
    console.log(event);
    console.log('fn4');
    console.log(this);
  }
  fn5(event){
    event.preventDefault()
    console.log(event);
    console.log('fn5');
    console.log(this);
  }
  render() {
    return (
      <div>
        <a href='' onClick={this.fn1}>点击</a>==
        <a href='' onClick={this.fn2.bind(this)}>点击fn2</a>==
        <a href='' onClick={(event)=>{this.fn3(event)}}>点击fn3</a>==
        <a href='' onClick={this.fn4}>点击fn4</a>==
        <a href='' onClick={this.fn5}>点击fn5</a>==
      </div>
    )
  }
}
获取事件对象、事件传参：

import React, { Component } from 'react'
 
export default class app extends Component {
  fn2(num,event){
    console.log(event);
    event.preventDefault()
    console.log(num);
    console.log('fn2');
    console.log(this);
  }
  fn3(num,event){
    console.log(event);
    event.preventDefault()
    console.log(num);
    console.log('fn3');
    console.log(this);
  }
  render() {
    return (
      <div>
 
        <a href='' onClick={this.fn2.bind(this,100)}>点击fn2</a>==
        <a href='' onClick={(event)=>{this.fn3(50,event)}}>点击fn3</a>==
      </div>
    )
  }
}
setState的使用：

import React, { Component } from 'react'
 
export default class app extends Component {
  state = {
    count:100,
    person:{
      name:'zs',
      age:20
    },
    list:['电脑','手机']
  }
  changeCount=()=>{
    this.setState({
      count:200
    })
  }
  addCount=(num)=>{
    this.setState({
      count:this.state.count + num
    })
  }
  changeAge= ()=>{
    this.setState({
      person:{...this.state.person,age:this.state.person.age + 1}
    })
  }
  changeList=()=>{
    this.state.list[0]='洗衣机'
    this.setState({})
  }
  addList=()=>{
    this.setState({
      list:[...this.state.list,'!!!']
    })
  }
  render() {
    return (
      <div>
        <p>count的值是：{this.state.count}</p>
        <button onClick={()=>this.changeCount()}>点击变200</button>==
        <button onClick={()=>this.addCount(10)}>点击累加10</button>==
        <hr/>
         <p>姓名是：{person.name}年龄是：{person.age}</p>
        <button onClick={()=>this.changeAge()}>年龄增加</button>==
        <hr/>
        <ul>
          {list.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
        <button onClick={this.changeList}>修改第一个为冰箱</button>==
        <button onClick={this.addList}>增加元素</button>
      </div>
    )
  }
}
在react类组件更新状态，需要使用setState方法

this.state.count = 200 错误：这样只是让数据发生了变化，模板没有更新

this.setState({ key:新值 })

setState方法调用之后，会让render函数重新执行，所以页面也就更新了

注意：render函数 里面不要写setState，死循环！

类组件：受控组件

表单元素的值被 React 中state控制，这个表单元素就是受控组件。

import React, { Component } from 'react'
 
export default class app extends Component {
    state = {
        formData: {
            username: '123',
            sex: '1',
            ah: ['zq'],
            from: '',
            text: '',
        },
    }
    changeValue(event, key) {
        this.setState({
            formData: { ...this.state.formData, [key]: event.target.value },
        })
    }
    changeMultipleValue(event, key) {
      console.log(event.target.value);
      console.log(key);
        let idx = this.state.formData[key].findIndex((item) => item === event.target.value)
        if (idx > -1) {
            this.state.formData[key].splice(idx, 1)
        } else {
            this.state.formData[key].push(event.target.value)
        }
        this.setState({})
    }
    render() {
        const { formData } = this.state
        return (
            <div>
                <p>
                    姓名：
                    <input
                        type="text"
                        value={formData.username}
                        onChange={(event) => this.changeValue(event, 'username')}
                    />
                </p>
                <p>
                    性别：
                    <label htmlFor="">
                        <input
                            type="radio"
                            value="1"
                            checked={formData.sex === '1'}
                            onChange={(event) => this.changeValue(event, 'sex')}
                        />
                        男
                    </label>
                    <label htmlFor="">
                        <input
                            type="radio"
                            value="0"
                            checked={formData.sex === '0'}
                            onChange={(event) => this.changeValue(event, 'sex')}
                        />
                        女
                    </label>
                </p>
                <p>
                    爱好：
                    <label htmlFor="">
                        <input
                            type="checkbox"
                            value="lq"
                            checked={formData.ah.includes('lq')}
                            onChange={(event) => this.changeMultipleValue(event, 'ah')}
                        />
                        篮球{' '}
                    </label>
                    <label htmlFor="">
                        <input
                            type="checkbox"
                            value="zq"
                            checked={formData.ah.includes('zq')}
                            onChange={(event) => this.changeMultipleValue(event, 'ah')}
                        />
                        足球{' '}
                    </label>
                    <label htmlFor="">
                        <input
                            type="checkbox"
                            value="ymq"
                            checked={formData.ah.includes('ymq')}
                            onChange={(event) => this.changeMultipleValue(event, 'ah')}
                        />
                        羽毛球{' '}
                    </label>
                </p>
                <p>
                    家乡：
                    <select name="" id="" onChange={(event) => this.changeValue(event, 'form')}>
                        <option value="">请选择</option>
                        <option value="hf">合肥</option>
                        <option value="la">六安</option>
                        <option value="aq">安庆</option>
                    </select>
                </p>
                <p>
                    留言：
                    <textarea
                        value={formData.text}
                        onChange={(event) => this.changeValue(event, 'text')}
                        name=""
                        id=""
                        cols="30"
                        rows="10"
                    ></textarea>
                </p>
            </div>
        )
    }
}
类组件：非受控组件

没有通过 state 控制的表单元素，它自己控制自身的值，就是非受控组件

import React, { Component, createRef } from 'react'
 
export default class app extends Component {
  constructor(){
    super()
    this.mobileRef = createRef()
    this.passwordRef = createRef()
  }
  btnOk=()=>{
    console.log(this.mobileRef.current.value);
    console.log(this.passwordRef.current.value);
  }
    render() {
        return (
            <div>
                <p>
                    账号：
                    <input type="text" ref={this.mobileRef}/>
                </p>
                <p>
                    密码：
                    <input type="text" ref={this.passwordRef}/>
                </p>
                <p>
                    <button onClick={this.btnOk}>提交</button>
                </p>
            </div>
        )
    }
}
组件通信：

import { Component } from 'react';
import Hello from './components/hello';
import Hi from './components/hi';
import Item from './components/item'
class App extends Component {
  state={
    list:[
      {id:1,title:'坚定不移走中国特色社会主义法治道路',from:'新华社',zan:'123'},
      {id:2,title:'2021年度法治人物——倪伯苍',from:'央视网',zan:'222'},
      {id:3,title:'岁末年终 愿这份“温良”伴你乘风破浪',from:'央视新闻客户端',zan:'444'}
    ]
  }
  render() {
    return (
      <>
        <Hello mes='你好' title={<p>我是外面你传过来的</p>}/>
        <hr/>
        <Hi num={100} />
        <hr/>
       {this.state.list.map(item=>{
          return <Item key={item.id} {...item}></Item>
        })}
      </>
    );
  }
}
export default App;
--------------------------------------------------------------------------------------
 
import React from 'react'
 
const item = ({id,title,zan,from}) => {
  return (
    <div className="child">
        <h3>{title}</h3>
        <div className="detail">
            <span>{from}</span>
            <span>{zan}点赞</span>
        </div>
    </div>
  )
}
 
export default item
-------------------------------------------------------------------------------------- 
  
import React, { Component } from 'react'
 
export default class hi extends Component {
  render() {
    return (
      <div>
          {this.props.num}
      </div>
    )
  }