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

3 回答

• 1

  父组件无法查询子组件的状态 . 至少，这不是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

  回复于 2024-05-07T02:07:40+08:00
• 1

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

  在子组件中添加另一个函数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那个参数

  不知道这是不是一个好的模式

  回复于 2024-05-07T02:07:40+08:00
• 1

  这是另一个答案，只是为了给出另一个例子 .

  它没有满足您的问题，并且告知履行您的问题不是最好的方法 . 也许在处理React和状态时你应该尝试不同的思考方式 .

  App

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

  Child component as Input

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

  回复于 2024-05-07T02:07:40+08:00