react 父子数据共享（1）

富文本展示 dangerouslySetInnerHTML主要用来渲染后端返回的代码

   count:'<h1>123</h1>'
  <div dangerouslySetInnerHTML={
              {
                __html:this.state.count
              }
            }>
   </div>

div标签可替换为其他标签

模糊搜索+axios获取数据

async getdata(){
   const {data:res}=await axios({
     method:'get',    请求方法get/post
     url:'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159',  请求地址
     headers:{      请求头（从后端获得）
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529"
,"bc":"110100"}',
      'X-Host': 'mall.film-ticket.cinema.list'
  } })
   this.setState({     赋值
    count:res.data.cinemas,
    count2:res.data.cinemas
   })
  }
componentDidMount(){
    this.getdata()
  }

    <input onInput={this.changeinput}/>

changeinput=(event)=>{     不传值自带一个  event=调用的本身（该input）
    const {count}=this.state
    const val= event.target.value 
    name中包含val值
    const a=count.filter(item =>item.name.toUpperCase().includes(val.toUpperCase()))
    name前x个字与val相同   
    const a=count.filter(item => val===item.name.substr(0,val.length))

includes()  包含   
    this.setState({
      count2:a
    })
  }

state状态

this.setState({
      count:this.state.count+1
    },()=>{
      console.log(this.state.count);
    })

属性props

类组件props

父组件引用子组件并添加props值  (title,leftshow,rightshow)

      <div>
        <Nav title='1' leftshow={true} rightshow={false}></Nav>
        <Nav title='列表' leftshow={false} rightshow={true}></Nav>
      </div>

子组件 通过this.props来使用父组件传来的props值

      const {leftshow,rightshow}=this.props
      <div>
        {leftshow&&<button >left</button>}
        <span>{this.props.title}</span>
        {rightshow&&<button>right</button>}
      </div>

props校验

首先引入 prop-types模块
import ifproptype from 'prop-types'    ifproptype为自定义名
在子组件中
static  propTypes={     
  title: ifproptype.string,    必须为字符串数据
  leftshow: ifproptype.bool,   必须为true/false
}

props校验默认值

static defaultProps={
    leftshow:true,
    rightshow:true
  }

函数组件props 父传子

父组件引用子组件并添加props值  (title,leftshow,rightshow)

        <div>
        <Nav title='123' rightshow={false}></Nav>
        <Nav title='列表' leftshow={false} rightshow={true}></Nav>
      </div>

 子组件 通过props引用参数来使用父组件传来的props值

function Nav(props){
  let {leftshow,rightshow}=props
 
  return(
    <div>
        {leftshow&&<button >left</button>}
        <span>{props.title}</span>
        {rightshow&&<button>right</button>}
      </div>
  )
}

 props校验

首先引入 prop-types模块
import ifproptype from 'prop-types'    ifproptype为自定义名
在子组件中
Nav.propTypes={     
  title: ifproptype.string,    必须为字符串数据
  leftshow: ifproptype.bool,   必须为true/false
}

props校验默认值

Nav.defaultProps={
    leftshow:true,
    rightshow:true
  }

子传父

父组件
export class App extends Component {
  add(a,b){
    console.log(a,b);     通过参数来得到子组件传来的数据
  }
  render() {
    return (
      <div>
        <Child event={this.add}></Child>    给子组件添加一个回调函数
      </div>
      
    )
  }
}

子组件
class Child extends Component {
  state={
    count:1
  }
  render() {
    return (
      <div>
        <button onClick={()=>{
           通过调用父组件传来的函数来向父组件传递数据
          return this.props.event(123,this.state.count)   
        }}>add</button>
      </div>
    )
  }
}

通过ref实现子父子通信

父

  创建ref对象
  username=React.createRef()
  password=React.createRef()
调用子组件
   <Child lable='用戶名' type='text' ref={this.username} ></Child>
   <Child lable='密码' type='password' ref={this.password}></Child>
    <button onClick={()=>{
    console.log(
        this.password.current.state.val,
        this.username.current.state.val)   
    通过this.username.current可以返回一个包含子组件大部分参数的对象
    }}>登录</button>       
    <button onClick={()=>{
        this.username.current.clear()    调用子组件中的clear函数来实现value的清空
        this.password.current.clear()
    }} >重置</button>
        

子

state={
    val:''
  }
  clear(){
    this.setState({
      val:''
    })
  }
  render() {
    return (
      <div>
         <span>{this.props.lable}</span>
         <input value={this.state.val} type={this.props.type} onChange={(e)=>{this.setState({val:e.target.value})}}></input> 
        
      </div>
    )