如何在ReactJS中将数据从子组件传递到其父组件？
如何在ReactJS中将数据从子组件传递到其父组件？
提问于 2016-07-15 18:37:32
我尝试将数据从子组件发送到它的父组件，如下所示：
const ParentComponent = React.createClass({
getInitialState() {
return {
language: '',
};
},
handleLanguageCode: function(langValue) {
this.setState({language: langValue});
},
render() {
return (
<div className="col-sm-9" >
<SelectLanguage onSelectLanguage={this.handleLanguage}/>
</div>
);
});下面是子组件：
export const SelectLanguage = React.createClass({
getInitialState: function(){
return{
selectedCode: '',
selectedLanguage: '',
};
},
handleLangChange: function (e) {
var lang = this.state.selectedLanguage;
var code = this.state.selectedCode;
this.props.onSelectLanguage({selectedLanguage: lang});
this.props.onSelectLanguage({selectedCode: code});
},
render() {
var json = require("json!../languages.json");
var jsonArray = json.languages;
return (
<div >
<DropdownList ref='dropdown'
data={jsonArray}
value={this.state.selectedLanguage}
caseSensitive={false}
minLength={3}
filter='contains'
onChange={this.handleLangChange} />
</div>
);
}
});我需要的是在父组件中获得用户所选择的值。我得到了这个错误：
Uncaught TypeError: this.props.onSelectLanguage is not a function有人能帮我找出问题所在吗？
附注:子组件正在从一个json文件创建一个下拉列表，我需要这个下拉列表将json数组的两个元素并排显示(比如："aaa，english“作为第一选择！)
{
"languages":[
[
"aaa",
"english"
],
[
"aab",
"swedish"
],
}回答 7
Stack Overflow用户
发布于 2020-05-15 23:24:50
在React v16.8+ function component中，可以使用useState()创建函数状态，以便更新父状态，然后将其作为道具属性传递给子状态，然后在子组件中可以触发父状态函数，以下是工作代码片段：
const { useState , useEffect } = React;
function Timer({ setParentCounter }) {
const [counter, setCounter] = React.useState(0);
useEffect(() => {
let countersystem;
countersystem = setTimeout(() => setCounter(counter + 1), 1000);
return () => {
clearTimeout(countersystem);
};
}, [counter]);
return (
<div className="App">
<button
onClick={() => {
setParentCounter(counter);
}}
>
Set parent counter value
</button>
<hr />
<div>Child Counter: {counter}</div>
</div>
);
}
function App() {
const [parentCounter, setParentCounter] = useState(0);
return (
<div className="App">
Parent Counter: {parentCounter}
<hr />
<Timer setParentCounter={setParentCounter} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('react-root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>
Stack Overflow用户
发布于 2017-03-19 17:00:57
我找到了在需要的时候从parents的子组件中获取数据的方法。
父级：
class ParentComponent extends Component{
onSubmit(data) {
let mapPoint = this.getMapPoint();
}
render(){
return (
<form onSubmit={this.onSubmit.bind(this)}>
<ChildComponent getCurrentPoint={getMapPoint => {this.getMapPoint = getMapPoint}} />
<input type="submit" value="Submit" />
</form>
)
}
}孩子：
class ChildComponent extends Component{
constructor(props){
super(props);
if (props.getCurrentPoint){
props.getCurrentPoint(this.getMapPoint.bind(this));
}
}
getMapPoint(){
return this.Point;
}
}这个例子展示了如何将函数从子组件传递到父组件，并使用此函数从子组件中获取数据。
Stack Overflow用户
发布于 2020-12-07 16:55:59
您可以使用useState在ParentComponent中创建状态，并将setIsParentData函数作为属性传递到ChildComponent中。
在ChildComponent中，通过prop使用received函数更新数据，以将数据发送回ParentComponent。
我使用这种技术，特别是当我在ParentComponent中的代码变得太长时，因此我将从ParentComponent创建子组件。通常，它只会下降1级，为了在组件之间共享状态，使用useContext或redux似乎有点过分了。
ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
export function ParentComponent(){
const [isParentData, setIsParentData] = useState(True);
return (
<p>is this a parent data?: {isParentData}</p>
<ChildComponent toChild={isParentData} sendToParent={setIsParentData} />
);
}ChildComponent.js
import React from 'react';
export function ChildComponent(props){
return (
<button onClick={() => {props.sendToParent(False)}}>Update</button>
<p>The state of isParentData is {props.toChild}</p>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38394015
复制相关文章
相似问题