写组件

写组件

思想
1、父组件 state 通过属性传递1、state到子组件(value) 2、方法onChange
2、子组件接收父组件的状态 将props里的状态 转成自己的state 变成子组件的值
3、子组件操作时用自己的state
4、子组件的内容要发生变化时 通过props接收的方法 告诉父组件 我要改变成那样 你配合点
5、当父组件的state改变时 子组件通过componentWillReceiveProps知道父组件内容改变发生相应变化

---

1、父组件 state 通过属性传递1、state到子组件(value) 2、方法onChange

// 第一步 父组件  需要用到的状态 telNum
 constructor(props) {
    super(props)
    this.state = {
      telNum: "123"
    }
  }

 render(){
    // 通过value传递给子组件自身的状态 telNum
	return <TelCompo value={this.state.telNum} onChange={this.collectInfo} />
 }

2、子组件接收父组件的状态 将props里的状态 转成自己的state 变成子组件的值

// 通过props.value 将父组件的value变为自己的state
constructor(props) {
    super(props)
    this.state = {
      loginInfo: "",
      isHidden: "none",
      value: props.value
    }
  }

3、子组件操作时用自己的state

<input
   type="tel"
     placeholder={"请输入11位手机号"}
     className={styles.input}
     maxLength="11"
     value={this.state.value}
     onChange={this.onChange}
 />

4、当值发生改变的时候 通过父组件传递的方法通知父组件 内容发生改变 你也要变成那样

onChange = e => {
  this.setState({
     value: e.target.value
   })
   this.props.onChange(e)
 }

5、当父组件的state改变时 子组件通过componentWillReceiveProps知道父组件内容改变发生相应变化

// 父组件
componentDidMount() {
    setInterval(() => {
      this.setState({ tel: Math.round(Math.random() * 999) })
    }, 1000)
  }
// 子组件 
  componentWillReceiveProps(nextProps, prevProps) {
	  //条件判断 如果父组件要改变的值 和原来的一样  就不做更新
    if (nextProps.value != this.state.value) {
      this.setState({
        value: nextProps.value
      })
    }
  }