通过 Parent 传递的 prop 获取子组件的当前状态 - Reactjs

Posted 2023-03-08

【中文标题】通过 Parent 传递的 prop 获取子组件的当前状态 - Reactjs

【英文标题】：Get current state of child component through prop passed by Parent - Reactjs

【发布时间】：2018-09-29 05:46:21

【问题描述】：

我正在学习 react 并且对此非常陌生，我正在修补一些东西以进一步了解这一点。

我想知道是否可以使用父母传下来的道具来控制台记录孩子的状态。

示例：

子组件（有自己的状态） 父组件（有自己的状态）

子组件 这个.state= 动物：'狮子'

<button onClickthis.props.giveMeState>

而且，我想安慰国家（动物：狮子）

父组件

this.state= 名称：“约翰” 给我状态（）？什么可以去这里，还是不是那么简单？ )

Codepen of example

【问题讨论】：

对不起，我不是很清楚。您想对两个组件使用相同的功能吗？你想从父母那里得到它作为孩子的道具吗？我认为 console.log 只是一个例子，因为您可以在需要的地方简单地使用 console.log( this.state )。

我的错误我尝试编写伪代码以使其更易于理解。 Parent 中有一个函数，它作为道具传递给 Child。然后我想看看是否可以使用该道具访问 Child 的状态。

【参考方案1】：

这里是另一个答案，只是为了举另一个例子。

它不能满足您的问题，并且正如告知的那样，满足您的问题不是最好的方法。也许你应该在使用 React 和 states 时尝试不同的想法。

应用

class App extends React.Component 
  state = 
    input: "initial input state",
    childState: "right now I don't know child state",
  ;

  handleInputChange = e => this.setState( input: e.target.value );
  handleChildState = ( childState ) => this.setState(  childState  ) 

  render() 
    return (
      <div style=styles>
        <h4>This is parent component.</h4>
        <p>Input state is: this.state.input </p>
        <p>Child state is: this.state.childState</p>
        <hr />
        <Input
          onInputChange=this.handleInputChange
          getState=this.handleChildState
        />
      </div>
    );
  

子组件作为输入

class Input extends React.Component 
  state = 
    myState: "some state"
  ;

  handleSendState = () => this.props.getState(this.state.myState);
  handleState = e => this.setState( myState: e.target.value );

  render() 
    return (
      <div>
        <h4>This is Child coponent</h4>
        <button onClick=this.handleSendState>
          Click me to get child state
        </button>
        <p>This is my state: this.state.myState</p>
        <p>Write something to change child's state.</p>
        <input type="text" onChange=this.handleState />
        <p>
          Write something to change parent's input state
        </p>
        <input type="text" onChange=this.props.onInputChange />
      </div>
    );
  

【参考方案2】：

父组件无法查询子组件的状态。至少，这不是 React 的预期设计。

我认为您要问的是如何协调孩子与父母的状态，并且您在正确的轨道上使用道具将状态从孩子传递给父母。

也许一个完整的例子可以做你想要的看起来像这样：

class Parent extends React.Component 
  state =  name: "John" 
  handleChildAnimal = animal => 
    this.setState( animal );
  handleClick = e => 
    console.log(`Child animal: $this.state.animal`);
  render() 
    return (
      <div>
        <Child onAnimal=this.handleChildAnimal />
        <button onClick=this.handleClick>Tell me Animal state</button>
      </div>
    );
  


class Child extends React.Component 
  state =  animal: "Lion" 
  handleClick = e => 
    console.log(`Animal: $this.state.animal`);
    this.props.onAnimal(this.state.animal);
  
  render() 
    return (
      <button onClick=this.handleClick>this.state.animal</button>
    );
  

Demo on CodePen.io

【讨论】：

我已将 codepen 包含在 OP 中......这可能是一个愚蠢的问题，也可能是不可能的。感谢您协调国家的例子。我正在消化信息！

Avinash 回答了问题。我在想它完全不好，因为我不明白为什么我现在要使用它。谢谢你的回答让我看到了组件如何更好地交互。

当您看到更多示例时，您就会明白它实际上是多么简单。我说的是作为一个学习者:) 通常我们将函数传递给子组件并使用该函数获取信息。您可以接受@Aaron 的回答。只有一件事，如果你点击“告诉我动物状态”而不点击“狮子”，你会得到未定义的状态，因为一开始没有状态。为了像我这样的菜鸟，我会添加另一个答案:)

我盯着/玩代码很久了。我认为它的箭头功能/道具传递的组合让我头晕目眩。我现在可以理解它了，但这就像掉进兔子洞一样。

@born2gamble，您可能会像我一样走在同一条路上，因为您在这里所说的正是我前一段时间的感受。在看到越来越多的示例并遵循教程之后，我现在对代码感到有点舒服。我建议在学习 React 之前学习一点 ES6 甚至 ES7，因为你会看到很多与它相关的东西（尤其是 ES6）。

【参考方案3】：

如果你想将孩子的状态值传递给父母， 你可以这样做，

在子组件中添加另一个函数getState，并通过该函数调用引用函数giveMeState

...
constructor(props) 
super(props)
this.state= animal:'Lion' 
this.getState = this.getState.bind(this)


getState()
this.props.giveMeState(this.state)

....
   <button onClick=this.getState>
....

并重新定义父函数，使其接受一个参数 和console.log那个参数

不确定这是否是一个好的模式

【讨论】：

是的，它看起来很糟糕，但它确实回答了我的问题。