[英]passing data from child to parent component - react - via callback function
passing data from child to parent component via callback function but somehow it's not working. 通过回调函数将数据从子级传递到父级组件,但是不起作用。 what am I doing wrong here?
我在这里做错了什么? passing data from child to parent component - react - via callback function
将数据从子级传递到父级组件-反应-通过回调函数
https://codepen.io/silentarrowz/pen/GEMQEP?editors=0010 https://codepen.io/silentarrowz/pen/GEMQEP?editors=0010
and here's the code 这是代码
class App extends React.Component{
constructor(props){
super(props);
this.state={
input:'this is the input for now'
}
//this.handleInput=this.handleInput.bind(this);
}
handleInput(x){
this.setState({
input:x
});
alert(this.state.input);
}
render(){
return(
<div>
<h1>Passing props from Child to Parent Component</h1>
<Child getInput={this.handleInput} />
here's the input: {this.state.input}
</div>
);
}
}
class Child extends React.Component{
constructor(){
super();
this.state={
text:''
}
}
passingProps(e){
var newInput=e.target.value;
//alert(newInput);
this.setState({
text:newInput
});
this.props.getInput(this.state.text);
}
render(){
return(
<div>
<input type="text" placeholder="please input a name..." onChange={this.passingProps} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
There are a couple of issues. 有几个问题。
1) You have to bind passingProps
1)您必须绑定
passingProps
constructor(){
super();
this.state={
text:''
}
this.passingProps = this.passingProps.bind(this);
}
2) this.setState
is asynchronous, so it's not guaranteed that this.state.text
will be set to the value you want by the time you pass it to this.props.getInput
. 2)
this.setState
是异步的,所以它不能保证this.state.text
将被设置为你想要的,你把它传递给时间值this.props.getInput
。 You can either do 你可以做
this.props.getInput(newInput)
or 要么
this.setState({ text: newInput }, () => {
this.props.getInput(this.state.text);
})
to resolve that issue. 解决该问题。
class App extends React.Component{
constructor(props){
super(props);
this.state={
input:'this is the input for now'
}
this.handleInput=this.handleInput.bind(this);
}
handleInput(event){
let value = event.target.value;
this.setState({
input:value
});
}
render(){
return(
<div>
<h1>{this.state.input}</h1>
<Child getInput={this.handleInput} />
</div>
);
}
}
class Child extends React.Component{
constructor(){
super(props);
}
render(){
return(
<div>
<input type="text" placeholder="please input a name..." onChange={this.props.getInput} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
Here is the answer for your question. 这是您问题的答案。 I hope your proplem is solved.
希望你的难题解决。
this
is not automatically bound in your passingProps function. this
不会自动绑定到您的passingProps函数中。 Try arrow function syntax to bind it. 尝试使用箭头函数语法将其绑定。
passingProps = e => {
var newInput=e.target.value;
//alert(newInput);
this.setState({
text:newInput
});
this.props.getInput(this.state.text);
}
In your Child
Component, you have written following code: 在
Child
组件中,您编写了以下代码:
passingProps(e){
var newInput=e.target.value;
//alert(newInput);
this.setState({
text:newInput
});
this.props.getInput(this.state.text);
}
The issue is due to the asynchronous behaviour of setState function. 该问题是由于setState函数的异步行为引起的。 It means you can not call setState on one line and expect its updates on next line.
这意味着您不能在一行上调用setState并期望在下一行上对其进行更新。 Use the callback function of setState to call the function of parent component just like this:
使用setState的回调函数来调用父组件的函数,如下所示:
passingProps(e){
var newInput=e.target.value;
//alert(newInput);
this.setState({ text: newInput }, () => {
this.props.getInput(this.state.text);
})
}
Same thing is happening in handleInput function of App component. App组件的handleInput函数中发生了相同的事情。
Two things that you need to correct it: 您需要纠正两件事:
this.state.input
after this.setState({input: 'xxx'})
. this.setState({input: 'xxx'})
之后使用this.state.input
。 Here is reason why not it. this.passingProps = this.passingProps.bind(this)
is defined what this
is current scope. this.passingProps = this.passingProps.bind(this)
被定义什么this
是目前的范围。 when you use this
in component's function, this
need to be bind. this
在组件的功能, this
需要被约束。 You can create a method in parent that accepts some data and then sets the received data as parent state. 您可以在父级中创建一个接受某些数据的方法,然后将接收到的数据设置为父级状态。 Then pass this method to child as props.
然后将此方法作为道具传递给孩子。 Now let the method accept child state as input and then let the method set the received child state as parent state.
现在,让该方法接受子状态作为输入,然后让该方法将接收到的子状态设置为父状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.