如何在ReactJS中将数据从子组件传递到其父组件？_Reactjs

如何在ReactJS中将数据从子组件传递到其父组件？

reactjs

如何在ReactJS中将数据从子组件传递到其父组件？,reactjs,Reactjs,我正在尝试将数据从子组件发送到其父组件，如下所示： const ParentComponent = React.createClass({ getInitialState() { return { language: '', }; }, handleLanguageCode: function(langValue) { this.setState({language: langValue});

我正在尝试将数据从子组件发送到其父组件，如下所示：

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

有人能帮我找到问题吗

另外，子组件正在从一个json文件创建一个下拉列表，我需要这个下拉列表来显示json数组的两个元素彼此相邻（例如：“aaa，english”作为首选！）

这应该行得通。发回道具时，将道具作为对象发送，而不是作为值发送，或者将道具作为父组件中的对象使用。其次，您需要格式化json对象以包含名称-值对，并使用

DropdownList的valueField
和textField
属性
简短回答
家长：
<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>


详细说明：
handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

{ 
"languages":[ 

    { 
    "code": "aaa", 
    "lang": "english" 
    }, 
    { 
    "code": "aab", 
    "lang": "Swedish" 
    }, 
  ] 
}

编辑：
handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

{ 
"languages":[ 

    { 
    "code": "aaa", 
    "lang": "english" 
    }, 
    { 
    "code": "aab", 
    "lang": "Swedish" 
    }, 
  ] 
}

考虑到React.createClass从v16.0开始就被弃用，最好继续通过扩展React.Component
来创建React组件。使用此语法将数据从子组件传递到父组件
母公司
class ParentComponent extends React.Component {

    state = { language: '' }

    handleLanguage = (langValue) => {
        this.setState({language: langValue});
    }

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        )
     }
}

儿童
var json = require("json!../languages.json");
var jsonArray = json.languages;

export const SelectLanguage = React.createClass({
    getInitialState: function() {
        return {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        };
    },

    handleLangChange: function () {
        var lang = this.refs.dropdown.value;
        this.props.onSelectLanguage(lang);            
    },

    render() {

        return (
            <div>
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

 componentDidMount():void{
      // Todo use this as per your scenrio
       this.props.onSelectPouringTimeDiff(pouringDiff);  
  }

我找到了一种方法，可以在需要时从父母的子组件中获取数据
家长：
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>
    )
  }
}

此示例显示如何将函数从子组件传递到父组件，并使用此函数从子组件获取数据。
将数据从子组件传递到父组件
const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },

    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        );
});

handleLanguageCode=()=>(langValue) {
  this.props.sendDatatoParent(langValue)
}

在父组件中：
getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

demoMethod(){
   this.props.sendData(value);
 }

render(){
 return(<Child sendData={ v => this.setState({item: v}) } />);
}

demoMethod(){
   this.props.sendData(value);
}

React.createClass方法在新版本的React中已被弃用，您可以通过以下方式非常简单地执行此操作，使一个功能组件和另一个类组件保持状态：
家长：
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>
    )
  }
}


constparentcomp=（）=>{
getLanguage=（语言）=>{
log（'父组件中的语言：'，语言）；
}
从子组件到父组件，如下所示
父组件
class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

类父级扩展React.Component{
状态={message:“父消息”}
callbackFunction=（childData）=>{
this.setState（{message:childData}）
},
render（）{
返回(
{this.state.message}
);
}
}

子组件
class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

类子级扩展React.Component{
sendBackData=（）=>{
this.props.parentCallback（“子消息”）；
},
render（）{
单击我发回
}
};

我希望这项工作
您甚至可以避免在父级直接更新状态的功能
在父组件中：
getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

demoMethod(){
   this.props.sendData(value);
 }

render(){
 return(<Child sendData={ v => this.setState({item: v}) } />);
}

demoMethod(){
   this.props.sendData(value);
}

其思想是向子级发送回调，子级将被调用以返回数据
使用函数的完整且最少的示例：
应用程序将创建一个子系统，该子系统将计算一个随机数，并将其直接发送回父系统，父系统将控制台。记录结果
const Child = ({ handleRandom }) => {
  handleRandom(Math.random())

  return <span>child</span>
}

constchild=（{handleRandom}）=>{
handleRandom（Math.random（））
返回儿童
}

const-App=（）=>console.log（num）}/>
考虑到React函数组件和使用钩子最近越来越流行，我将给出一个简单的示例，说明如何将数据从子组件传递到父组件
class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

在父函数组件中，我们将有：
import React, { useState, useEffect } from "react";

然后
并将setChildData（其工作类似于类组件中的this.setState）传递给Child
return( <ChildComponent passChildData={setChildData} /> )

然后，您可以像使用处理函数一样传递数据
const functionHandler = (data) => {

props.passChildData(data);

}

在React v16.8+
函数组件中，您可以使用创建一个函数状态来更新父状态，然后将其作为props属性传递给子组件，然后在子组件中触发父状态函数，以下是一个工作片段：

const{useState，useffect}=React；
函数计时器（{setParentCounter}）{
const[counter，setCounter]=React.useState（0）；
useffect（（）=>{
let反系统；
计数器系统=设置超时（（）=>设置计数器（计数器+1），1000）；
return（）=>{
clearTimeout（反系统）；
};
}，[柜台]；
返回(
{
setParentCounter（计数器）；
}}
>
设置父计数器值

子计数器：{Counter}
);
}
函数App（）{
常量[parentCounter，setParentCounter]=useState（0）；
返回(
父计数器：{parentCounter}

);
}
render（，document.getElementById（'react-root'）
使用回调将数据从子组件传递到父组件
You need to pass from parent to child callback function, and then call it in the child.

父组件：-TimeModal
  handleTimeValue = (timeValue) => {
      this.setState({pouringDiff: timeValue});
  }

  <TimeSelection 
        prePourPreHours={prePourPreHours}
        setPourTime={this.setPourTime}
        isPrePour={isPrePour}
        isResident={isResident}
        isMilitaryFormatTime={isMilitaryFormatTime}
        communityDateTime={moment(communityDT).format("MM/DD/YYYY hh:mm A")}
        onSelectPouringTimeDiff={this.handleTimeValue}
     />

将数据从子组件传递到父组件的最佳方法
class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

子组件
const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },

    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        );
});

handleLanguageCode=()=>(langValue) {
  this.props.sendDatatoParent(langValue)
}

家长
const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },

    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        );
});

handleLanguageCode=()=>(langValue) {
  this.props.sendDatatoParent(langValue)
}

this.setState（{item:data}）}/>
 您可以使用useState
在父组件中创建状态，并将setIsParentData
函数作为prop传递到子组件中
在ChildComponent中，通过prop使用接收的函数更新数据，以将数据发送回ParentComponent
我使用这种技术，尤其是当ParentComponent中的代码变得太长时，因此我将从ParentComponent创建子组件。通常情况下，只需降低1级，使用useContext或redux来在组件之间共享状态似乎有些过分
ParentComponent.js

import React，{useState}来自“React”；
从“/ChildComponent”导入ChildComponent；
导出函数ParentComponent（）{
常量[isParentData，setIsParentData]=useState（True）；
返回(
这是父数据吗？：{isParentData}
);
}

ChildComponent.js

从“React”导入React；
导出功能子组件（道具）{
返回(
{props.sendToParent（False）}>更新
isParentData的状态为{props.toChi