如何使用reactjs解析子级到父级的数据?
[英] How to parse data from child to parent using reactjs?
本文介绍了如何使用reactjs解析子级到父级的数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在研究 reactjs，但处于非常基础的水平.我试图解析从父母到孩子以及从孩子到父母的数据.父母对孩子工作正常，但孩子对父母我不能.
这是整个场景......我有 3 个组件.. 应用程序、家庭和用户.从 App 组件到 Home 组件我想解析数据..它工作正常.在 Home 组件中，我有一个 Input 字段.如果我写一些东西并单击按钮，则输入值将解析为 App 组件.应用是我的父母，家庭是孩子..
这里是代码... APP组件
构造函数() {极好的()this.state = {用户名 : ' '};}更改UName(新名称){this.setState({用户名:新名});console.log('user',newName);//获取未定义}使成为() {返回 (<div className="应用程序"><Home changeUser = {() =>this.changeUName()}/>
);}
子组件用户
构造函数(道具){极好的();this.state = {用户名: ''};}更改UName(事件){this.setState({用户名:事件.目标.值});}名称变更() {console.log(this.state.userName)//如果我在输入字段中写测试".我会在这里得到价值.this.props.changeUser(this.state.userName);//一旦我解析了这个值，我就会变得未定义..}使成为() {返回(<div><h1>首页名称:<input type="text" value={this.state.userName} onChange={(event) =>this.changeUName(event)} ref="uName"/><br/><button onClick={() =>this.nameChange()}>点击</button>
)}
我不知道哪里出错了.请指导我.提前致谢..
解决方案
问题是您没有将收到的 props 绑定到函数定义.见下面的片段
class Parent extends React.Component {构造函数(){极好的()this.state = {用户名 : ' '};}更改UName(新名称){this.setState({用户名:新名});console.log('user',newName);//获取未定义}使成为() {返回 (<div className="应用程序"><Home changeUser = {(value) =>this.changeUName(value)}/>
);}}class Home 扩展 React.Component {构造函数(道具){极好的();this.state = {用户名: ''};}更改UName(事件){this.setState({用户名:事件.目标.值});}名称变更() {console.log(this.state.userName)//如果我在输入字段中写测试".我会在这里得到价值.this.props.changeUser(this.state.userName);}使成为() {返回(<div><h1>首页名称:<input type="text" value={this.state.userName} onChange={(event) =>this.changeUName(event)} ref="uName"/><br/><button onClick={() =>this.nameChange()}>点击</button>
)}}ReactDOM.render(, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>
否则用箭头函数指定函数
changeUName = (newName) =>{this.setState({用户名:新名});console.log('user',newName);//获取未定义}
并称之为
<Home changeUser = {this.changeUName}/>
Hi I am currently working on reactjs but in very basic level. I was trying to parse data from parent to child as well as child to parent. Parent to child is working properly but child to parent I couldn't.
Here is the whole scenario...
I have 3 components.. App, Home and User.
From App component to Home component I want to parse data.. It is working properly.
In Home component I have an Input field. If I write something and click on button then the input value will parse into App component. App is my parent and Home is child..
Here is the code... APP Component
constructor() {
super()
this.state = {
userName : ' '
};
}
changeUName(newName) {
this.setState({
userName: newName
});
console.log('user',newName); // Getting Undefined
}
render() {
return (
<div className="App">
<Home changeUser = {() => this.changeUName()} />
</div>
);
}
Child Component User
constructor(props) {
super();
this.state = {
userName: ''
};
}
changeUName(event) {
this.setState({
userName: event.target.value
});
}
nameChange() {
console.log(this.state.userName) // If I write "Test" in input field. I will get the value here.
this.props.changeUser(this.state.userName); // Once I parse this value, I am getting undefined..
}
render() {
return(
<div>
<h1> HOME Page</h1>
Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/>
<button onClick={() => this.nameChange()}>Click</button>
</div>
)
}
I do not know where it is going wrong. Please guide me. Thanks in advance..
解决方案
The thing is that you are not binding the props recieved to the function definition. See the below snippet
class Parent extends React.Component {
constructor() {
super()
this.state = {
userName : ' '
};
}
changeUName(newName){
this.setState({
userName: newName
});
console.log('user',newName); // Getting Undefined
}
render() {
return (
<div className="App">
<Home changeUser = {(value) => this.changeUName(value)} />
</div>
);
}
}
class Home extends React.Component {
constructor(props) {
super();
this.state = {
userName: ''
};
}
changeUName(event) {
this.setState({
userName: event.target.value
});
}
nameChange() {
console.log(this.state.userName) // If I write "Test" in input field. I will get the value here.
this.props.changeUser(this.state.userName);
}
render() {
return(
<div>
<h1> HOME Page</h1>
Name : <input type="text" value={this.state.userName} onChange={(event) => this.changeUName(event)} ref="uName"/><br/>
<button onClick={() => this.nameChange()}>Click</button>
</div>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Or else Specify the funtion with arrow function
changeUName = (newName) =>{
this.setState({
userName: newName
});
console.log('user',newName); // Getting Undefined
}
and call it like
<Home changeUser = {this.changeUName} />
这篇关于如何使用reactjs解析子级到父级的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
