PROSAGA码农传奇-React-React是将表单元素状态传递给兄弟/父元素的正确方法吗？

0# 丫头 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    解释了将数据从父传递到子传输的概念，反之亦然。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          import React, { Component } from "react";
import ReactDOM from "react-dom";

// taken refrence from https://gist.github.com/sebkouba/a5ac75153ef8d8827b98

//example to show how to send value between parent and child

//  props is the data which is passed to the child component from the parent component

class Parent extends Component {
  constructor(props) {
    super(props);

this.state = {
      fieldVal: ""
    };
  }

onUpdateParent = val => {
    this.setState({
      fieldVal: val
    });
  };

render() {
    return (
      // To achieve the child-parent communication, we can send a function
      // as a Prop to the child component. This function should do whatever
      // it needs to in the component e.g change the state of some property.
      //we are passing the function onUpdateParent to the child
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br />
        <Child onUpdate={this.onUpdateParent} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);

this.state = {
      fieldValChild: ""
    };
  }

updateValues = e => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    // onUpdateParent would be passed here and would result
    // into onUpdateParent(e.target.value) as it will replace this.props.onUpdate
    //with itself.
    this.setState({ fieldValChild: e.target.value });
  };

render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.updateValues}
          value={this.state.fieldVal}
        />
      </div>
    );
  }
}

class OtherChild extends Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
        <h5>
          the child can directly get the passed value from parent by this.props{" "}
        </h5>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

1# 真不错 | 2019-08-31 10-32

2# 电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    使用React＆gt; = 16.3，您可以使用ref和forwardRef从父级访问子级DOM。不要再使用旧的参考方式了。
    <BR/>
    
以下是使用您的案例的示例：
  </p>
   <pre>
    <code>
      import React, { Component } from 'react';

export default class P extends React.Component {
   constructor (props) {
      super(props)
      this.state = {data: 'test' }
      this.onUpdate = this.onUpdate.bind(this)
      this.ref = React.createRef();
   }

onUpdate(data) {
      this.setState({data : this.ref.current.value}) 
   }

render () {
      return (
        <div>
           <C1 ref={this.ref} onUpdate={this.onUpdate}/>
           <C2 data={this.state.data}/>
        </div>
      )
   }
}

const C1 = React.forwardRef((props, ref) => (
    <div>
        <input type='text' ref={ref} onChange={props.onUpdate} />
    </div>
));

class C2 extends React.Component {
    render () {
       return <div>C2 reacts : {this.props.data}</div>
    }
}

</code>
  </pre>
  <P>
    看到
    <a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="nofollow noreferrer">
      参考文献
    </A>
     和
    <a href="https://reactjs.org/docs/forwarding-refs.html" rel="nofollow noreferrer">
      ForwardRef
    </A>
     有关refs和forwardRef的详细信息。
  </p>
</DIV>

3# 猫南北 | 2019-08-31 10-32