反应:如何将道具从孩子传递给父母到另一个孩子?

反应:如何将道具从孩子传递给父母到另一个孩子?,第1张

反应:如何将道具从孩子传递给父母到另一个孩子?

当您希望2个孩子交流或共享一些数据时,在React中实现此目的的方法是 提升状态
(source)。

这意味着孩子使用的状态应该居住在父母中。然后父母将状态传给孩子。

要从子项中的 *** 作更新状态,通常的模式是从父项中传递一个函数,该函数在子项中执行该 *** 作时会被调用。

这是一个示例,它可以满足您的要求:

class Parent extends React.Component {  constructor(props) {    super(props);    this.state = { valueOfUserInput: '' };  }  handleUserInputChange = event => {    this.setState({      valueOfUserInput: event.target.value,    });  };  render() {    const { valueOfUserInput } = this.state;    return (      <div>        <Child1 valueOfUserInput={valueOfUserInput} onUserInputChange={this.handleUserInputChange} />        <Child2 valueOfUserInput={valueOfUserInput} />      </div>    );  }}class Child1 extends React.Component {  render() {    const { valueOfUserInput, onUserInputChange } = this.props;    return <input type="text" value={valueOfUserInput} onChange={onUserInputChange} />;  }}class Child2 extends React.Component {  render() {    const { valueOfUserInput } = this.props;    return (      <div>        {valueOfUserInput}      </div>    );  }}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/4902099.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-12
下一篇 2022-11-12

发表评论

登录后才能评论

评论列表(0条)

保存