Question

我是ReactJS的新手。

我想问一个简单的问题。

如果孩子被更换，我该如何更新其他孩子？

谢谢！

以下代码片段供参考。

＆＃13;

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: "Default Value",
    }
  }
  
  onUpdate = (val) => {
    this.setState({
      fieldVal: val,
    })
  };

  render() {
    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br/>
        <Child passedVal={this.state.fieldVal} onUpdate={this.onUpdate} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} onUpdate={this.onUpdate} />
      </div>
    )
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: props.passedVal,
    }
  }

  update = (e) => {
    this.props.onUpdate(e.target.value);
    this.setState({fieldVal: e.target.value});
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <p>Value in Child: {this.state.fieldVal}</p>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.fieldVal}
        />
      </div>
    )
  }
}

class OtherChild extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      fieldVal: this.props.passedVal,
    }
    
  }
  
  update = (e) => {
    this.props.onUpdate(e.target.value);
    this.setState({fieldVal: e.target.value});
  };
  
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        <p>Value in OtherChild: {this.state.fieldVal}</p>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.fieldVal}
        />
      </div>
    )
  }
}


React.render(
  <Parent />,
  document.getElementById('react_example')
);

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
  
  <meta charset="utf-8">
  <title>React Hello World w/ JSBin</title>
</head>
<body>
  <div id="react_example"></div>
</body>
</html>

＆＃13;

Answer 1

在小孩和其他小孩，不使用状态。相反，只有道具可以在其中使用：

子

class Child extends React.Component {
  constructor() {
    super();
    this.update = this.update.bind(this);
  }

  update = (e) => {
    this.props.onUpdate(e.target.value);
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <p>Value in Child: {this.props.fieldVal}</p>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.props.fieldVal}
        />
      </div>
    )
  }
}

和其他孩子一样

Answer 2

您目前正在向您的孩子传递passedVal作为初始状态，然后单独更改您孩子的当地状态。如果您希望孩子们始终拥有相同的价值，那么您就不需要保持本地状态，而只需使用通过props传递的值。

您不需要更改Parent中的任何内容。但你的孩子喜欢这样：

class Child extends React.Component {    
  update = (e) => {
    this.props.onUpdate(e.target.value);
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <p>Value in Child: {this.state.fieldVal}</p>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.props.passedVal}
        />
      </div>
    )
  }
}

组件儿童与其他儿童之间的沟通

2 个答案: