Question

我学习的反应非常新，我正在修补一些东西来理解这一点。

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

示例：

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

子组件
this.state = { 动物：＆＃39;狮＆＃39; }

<button onClick{this.props.giveMeState}>

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

父组件

this.state = { 姓名：＆＃39;约翰＆＃39; }
giveMeState（）{？什么可以去这里，还是不那么简单？） }

Codepen of example

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

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

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

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

它不能解决您的问题，并且说实现您的问题并不是最好的方法。也许在处理React和状态时你应该尝试不同的思考。

应用

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

通过父级传递的道具获取子组件的当前状态 - Reactjs

3 个答案: