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

Question

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

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

示例：

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

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

<button onClick{this.props.giveMeState}>

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

父组件

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

Codepen of example

Answer 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>
    );
  }
}

Answer 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

Answer 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那个参数

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