通过Parent - Reactjs传递的prop获取子组件的当前状态
通过Parent - Reactjs传递的prop获取子组件的当前状态
提问于 2018-04-19 05:00:54
我正在学习反应和非常新的这一点，我正在修补一些东西，以了解这一点。
我想知道是否有可能使用父母传下来的道具来console.log孩子的状态。
示例:
子组件(具有自己的状态)
父组件(有自己的状态)
子组件
this.state={动物：‘狮子’}
<button onClick{this.props.giveMeState}>还有，我想安慰国家(动物:狮子)
父组件
this.state={姓名：'John‘}
giveMeState(){？这里可以做什么，或者不是那么简单？)}
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-04-19 05:29:52
父组件无法查询子组件的状态。至少，这不是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>
);
}
}Stack Overflow用户
发布于 2018-04-19 05:29:52
如果你想把子元素的state值传递给父元素，你可以这样做：
在子组件中，添加另一个函数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
但我不确定这是不是一个好的模式
Stack Overflow用户
发布于 2018-04-19 21:42:00
这里是另一个答案，只是为了给出另一个例子。
它不能满足您的问题，并且如前所述，满足您的问题并不是最好的方法。也许你应该试着在使用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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49908936
复制相关文章
相似问题
腾讯云开发者
