React的Props，state, ref 学习总结

• class组件使用props

  class PropsComponent extends React.Component {
      render() {
          return (
              <React.Fragment>
                  <p> {this.props.value} </p>
                  <p> {this.props.name} </p>
                  <input onChange={this.props.inputOnChange} placeholder="请输入" />
              </React.Fragment>
          )
      }
  }
  //props参数验证
  PropsComponent.propTypes = {
      value:PropTypes.number,
      name:PropTypes.string,
      inputOnChange: PropTypes.func
  }
  //渲染组件
  const data = { value: 1, name: "WRC", inputOnChange: (e) => { console.log(e.target.value) } }
  ReactDOM.render(<PropsComponent {...data} />, document.getElementById('root'))
  

• 函数组件使用props

  function PropsComponent(props) {
      return (
          <React.Fragment>
              <p> {props.value} </p>
              <p> {props.name} </p>
              <input onChange={props.inputOnChange} placeholder="请输入" />
          </React.Fragment>
      )
  }
  //props参数验证
  PropsComponent.propTypes = {
      value:PropTypes.number,
      name:PropTypes.string,
      inputOnChange: PropTypes.func
  }
  //渲染组件
  const data = { value: 1, name: "WRC", inputOnChange: (e) => { console.log(e.target.value) } }
  ReactDOM.render(<PropsComponent {...data} />, document.getElementById('root'))
  

• class组件使用state

  class StateComponent extends React.Component {
      state = { value: false,name:'夏天' }
      chageValue = () => {
          //修改的时候直接
          //三种修改方式
          //this.setState({ value: true}) //直接修改
          this.setState((state) => ({ value: !state.value }))  //使用匿名函数，传入参数为state(执行之前的state)
          //this.setState((state,props) => ({ value: !state.value })) //使用匿名函数，传入参数为state(执行之前的state),props(组件实例的props)
      }
      render() {
          return (
              <React.Fragment>
                  <p> {this.state.value ? "炎热" : "凉爽"} </p>
                  <button onClick={this.chageValue}>改变</button>
              </React.Fragment>
          )
      }
  }
  

• 函数组件使用state

  function StateComponent(){
      //value 为状态的名称，setValue为设置value的方法，false是value状态的默认值
      const [value,setValue] = React.useState(false);
      function changeValue(){
          setValue(!value)
      }
      return (
          <React.Fragment>
              <p> {value ? "炎热" : "凉爽"} </p>
              <button onClick={changeValue}>改变</button>
          </React.Fragment>
      )
  }
  
  // 注：声明的value和setvalue在本组件是可以直接访问。
  

• class组件使用ref

  -- 使用回调函数
  class RefComponent extends React.Component {
      showData = () => {
          const { input1 } = this; //解构赋值
          alert(input1.value);
      }
      bindInput1 = (c) => {
          this.input1 = c;  //绑定元素到当前实例的input1
      }
      render() {
          return (
              <React.Fragment>
                  <input ref={this.bindInput1} type="text" placehoder="请输入" />   {/* bindInput1:为当前的inoput打一个标签,绑定到组件实例的input1(this.input1 = document.getElementById('当前input的id'))*/}
                  <button onClick={this.showData}>点击弹窗</button>  
              </React.Fragment>
          );
      }
  }
  
  -- 使用React.createRef
  class RefComponent extends React.Component {
      input1 = React.createRef();  //创建一个ref到实例
      showData = () => {
          const { input1 } = this; //解构赋值
          alert(input1.current.value); //访问当前元素的值
      }
      render() {
          return (
              <React.Fragment>
                  <input ref={this.input1} type="text" placehoder="请输入" />   {/* 绑定到对应的ref的值 */}
                  <button onClick={this.showData}>点击弹窗</button>  
              </React.Fragment>
          );
      }
  }
  
  -- 字符串绑定ref(已过时)
  class RefComponent extends React.Component {
      showData = () => {
          const {input1} = this.refs;
          alert(input1.value);
      }
      render() {
          return (
              <React.Fragment>
                  <input ref="input1" type="text" placehoder="请输入" />   {/* 绑定到对应的ref的值 */}
                  <button onClick={this.showData}>点击弹窗</button>  
              </React.Fragment>
          );
      }
  }
  
  

• Hook组件使用ref

  function RefComponent(){
      const input1 = React.useRef(null);
      function showData(){
          alert(input1.current.value)
      }
      return(
          <React.Fragment>
              <input placeholder = "请输入"  type = "text" ref = {input1} />
              <button onClick = {showData} >点击弹窗</button>
          </React.Fragment>
      )
  }
  

• 总结

  //子组件通过使用ref标识来展示input的输入，通过props的传入事件绑定当前的input的值
  //传递给父组件
  function ChildComponent(props) {
      const input1 = React.useRef(null);
      function inputOnChange(e)
      {
          //TODO 当前组件的参数
          props.onChange(e)
      }
      return (
          <React.Fragment>
              <p>子组件：{input1.current == null ? '' : input1.current.value}</p>
              <input onChange={e=> {inputOnChange}} placeholder="请输入" type="text" ref={input1} />
              <button onClick={showData} > click </button>
          </React.Fragment>
      )
  }
  //父组件通过state绑定子组件传过来的输入
  function ParentComponent() {
      const [inputValue, setInputValue] = React.useState('')
      return (
          <React.Fragment>
              <p>父组件：{inputValue}</p>
                  <ChildComponent onChange={e => {setInputValue(e.target.value) }} />
          </React.Fragment>
      )
  }