ReactJS에서 하위 구성요소에서 상위 구성요소로 데이터를 전달하는 방법은 무엇입니까?

ReactJS에서 하위 구성요소에서 상위 구성요소로 데이터를 전달하는 방법은 무엇입니까?

다음과 같이 하위 구성 요소에서 상위 구성 요소로 데이터를 보내려고 합니다.

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"
      ],
}

이거면 될 거야.프로펠을 반송할 때 오브젝트로 송신하는 것이 아니라 값으로 송신하거나 부모 컴포넌트의 오브젝트로 사용하는 것입니다.으로 이름값 하고 ", "json"을 사용해야 .valueField ★★★★★★★★★★★★★★★★★」textField「」의 어트리뷰트DropdownList

단답

부모:

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

아이:

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

---

상세:

편집:

React 이후된 것을 .createClass v16.0을 .React.Component하여 자녀에서 를 전달하면 과 같이

부모

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 class SelectLanguage extends React.Component {
    state = {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        }

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

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

---

「」를 사용합니다.createClassOP가 그의 답변에 사용한 구문 부모

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

어린아이

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

JSON:

{ 
"languages":[ 

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

하위 구성 요소에서 상위 구성 요소로 데이터를 전달하려면 다음과 같이 하십시오.

부모 컴포넌트:

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

하위 구성 요소:

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

React Function Components와 Hooks 사용이 최근 인기를 끌고 있는 것을 고려하여 데이터를 자녀에서 부모 컴포넌트로 전달하는 간단한 예를 제시하겠습니다.

Parent Function Component에는 다음과 같은 기능이 있습니다.

import React, { useState } from "react";

그리고나서

const [childData, setChildData] = useState("");

setChildData(이러한 작업을 수행하는 경우)를 전달합니다.setState in Class Components)를 Child로 설정

return( <ChildComponent passChildData={setChildData} /> )

Child Component에서는 먼저 수신 소품을 입수합니다.

function ChildComponent(props){ return (...) }

핸들러 기능을 사용하는 것처럼 데이터를 전달할 수 있습니다.

const functionHandler = (data) => {

props.passChildData(data);

}

React v16.8+함수 컴포넌트에서는 부모 상태를 갱신할 수 있는 함수 상태를 작성한 후 이를 소품 속성으로 자녀에게 전달합니다.자녀 컴포넌트 내에서 부모 상태 함수를 트리거할 수 있는 작업 스니펫은 다음과 같습니다.

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>

하려면 Parent Component를 사용합니다.useState하다.setIsParentData아이 컴포넌트

ChildComponent에서 프로펠을 통해 수신된 함수를 사용하여 데이터를 업데이트하여 ParentComponent로 다시 전송합니다.

특히 Parent Component의 코드가 너무 길어질 때 이 기술을 사용하기 때문에 Parent Component에서 자녀 컴포넌트를 만듭니다.일반적으로는 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>
  );
};

부모의 자녀 구성 요소에서 필요할 때 데이터를 얻는 방법을 찾았습니다.

부모:

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

이 예에서는 함수를 하위 구성 요소에서 상위 구성 요소로 전달하고 이 함수를 사용하여 하위 구성 요소에서 데이터를 가져오는 방법을 보여 줍니다.

다음과 같이 하위 구성요소에서 상위 구성요소로

부모 성분

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

잘 됐으면 좋겠다

최근 입력으로 이 작업을 수행할 수 있는 편리하고 쉬운 방법을 찾았습니다.

기본적으로 State를 사용하고 나서 onChange를 자녀에 대한 버팀목으로 설정하면 "값"을 인수로 하여 useState "setVal" 붐에 넣을 수 있습니다.상태 변경 자녀는 매번 > 부모입니다.

const Parent = () => {
  const [val, setVal] = useState("initial value")
  return(
    <>
    <Child onChange={(value)=> setVal(value)}/>
    <div>{val}</div>
    </>
  )
};

export default Parent;

const Child = (props) => {
  return(
  <button onClick={() => props.onChange("your value here") }>
  )
}

여기서 간단하게 설명하겠습니다.자체 컴포넌트에서 부모 컴포넌트 카운터를 갱신하고 있습니다.

상위 컴포넌트(PropsApp.jsx)

import React, { useState } from 'react'
import Child from './Child'

export default function PropsApp(){
   const [counter, setCounter] = useState(0)

   const updateMyCounter = () => {
       setCounter(counter + 1)
   }

   return(
    <>  
        <hr></hr>
        <h1>This is Parent</h1>
        <h2>{counter}</h2>
        <Child updateParent={updateMyCounter} />
    </>
   )
}

하위 컴포넌트(Child.jsx)

export default function Child(props){

return(
    <>  
        <hr></hr>
        <h1>This is Child</h1>
        <button
            onClick={props.updateParent}
        >
            Update Parent Component
        </button>
    </>
   )
}

상위 컴포넌트 업데이트를 클릭하면 매직이 표시됩니다.

React.createClass 메서드는 React의 새 버전에서 더 이상 사용되지 않습니다. 다음과 같이 간단하게 하나의 기능 컴포넌트와 다른 클래스 컴포넌트를 사용하여 상태를 유지할 수 있습니다.

부모:

const ParentComp = () => {
  
  getLanguage = (language) => {
    console.log('Language in Parent Component: ', language);
  }
  
  <ChildComp onGetLanguage={getLanguage}
};

아이:

class ChildComp extends React.Component {
    state = {
      selectedLanguage: ''
    }
    
    handleLangChange = e => {
        const language = e.target.value;
        thi.setState({
          selectedLanguage = language;
        });
        this.props.onGetLanguage({language}); 
    }

    render() {
        const json = require("json!../languages.json");
        const jsonArray = json.languages;
        const selectedLanguage = this.state;
        return (
            <div >
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    value={tselectedLanguage}
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
};

아이디어는 콜백을 아이에게 보내는 것입니다. 콜백은 데이터를 돌려주기 위해 호출됩니다.

함수를 사용한 완전하고 최소한의 예:

Child를 됩니다.console.log

const Child = ({ handleRandom }) => {
  handleRandom(Math.random())

  return <span>child</span>
}

const App = () => <Child handleRandom={(num) => console.log(num)}/>

React에서 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하려면:

1. 값을 받는 부모로부터 자식에게 함수를 전달합니다.
2. 하위 구성요소에서 값이 변경되면 업데이트된 값으로 함수를 호출합니다.

예.

const Parent = () => {

  const handleChange = values => {
     alert(JSON.stringify(values) );
     //do something with the values  
  }

  return (
    <Child handleChange={handleChange} />
  );
}

const Child = ({handleChange}) => {
    return (
        <button onClick={()=> handleChange('values you wish to pass') }}></button>
    );
}

NB: 리액트 16에서는 거의 모든 경우에 기능 컴포넌트를 사용할 것을 권장합니다.

부모에서 직접 상태를 업데이트하지 않아도 됩니다.

부모 컴포넌트:

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

하위 구성 요소:

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

콜백을 사용하여 데이터를 자식 컴포넌트에서 부모 컴포넌트로 전달

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}
     />

주의:- onSelectPusingTimeDiff={this.handleTimeValue}

필요한 경우 하위 구성 요소에서 소품 호출

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

자녀 컴포넌트에 잘못된 함수를 전달하고 있으며 부모 클래스에 다음 함수가 없습니다.handleLanguage기능.대신 다음과 같이 전달할 수 있습니다.<SelectLanguage onSelectLanguage={this.handleLanguageChange}/>클래스에 함수가 없는 경우 None이 될 수 있습니다.부모 컴포넌트는 다음과 같습니다.

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

데이터를 하위 구성 요소에서 상위 구성 요소로 전달하는 가장 좋은 방법

자성분

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

부모

<부모의 sendDatatoParent={데이터=>이것.setState({item: data}) } />;

 import { useEffect, useState } from "react";
  
  export default function App() {
    const data = (data) => {
      console.log("data", data);
    };
  
    const myData = {
      name: "hi this is my data"
    };
  
    return <Form onSubmit={data} myDatasa={myData} />;
  }
  
  const Form = (props) => {
    console.log("myData", props.myDatasa.name);
  
    const [choreDesc, setChoreDesc] = useState();
    const handleSubmit = (e) => {
      e.preventDefault();
      props.onSubmit(choreDesc);
    };
  
    const handlechange = (e) => {
      setChoreDesc(e.target.value);
    };
  
    return (
      <form
        onSubmit={(e) => {
          handleSubmit(e);
        }}
      >
        <label>Chore description:</label>
        <br />
        <input
          name="choreDesc"
          type="text"
          value={choreDesc}
          onChange={handlechange}
        />
        <br />
        <input type="submit" value="Add Log" />
      </form>
    );
  };
  ```

리액트 후크의 부모 컴포넌트와 자녀 컴포넌트 간에 데이터 전달

함수를 자녀에게 전달하고 부모의 함수를 호출하여 값을 자녀에게 전달하기를 기다립니다.

parent (../app.disples

import MyCOMP from "../component/MyCOMP"; //import child component

export default function MyMainPage() {
return(
  <>
    <MyCOMP 
      //pass function to child and wait child passback the changed value
      // 1.Click child component passing function to child

    ParentFunction={(x)=>{
      console.log('Child Pass Back Value',x)  

      // 3. Parent received data
      // after you get the value change you can ultilize another function, useEffect or useState 
    }}/>
  </>
)
}

아이(../component/MyCOMP.js)

export default function MyCOMP({ParentFunction}){
  return(
    <>
      <button onClick={()=>{ 

        // 2. Child passing back value to parent 
        ParentFunction("Child reply ANSWER is ","fm 99.8");}}>Click Me</button>

    </>
  )
}

결과

버튼을 클릭하면 부모 클래스가 "fm 99.8" 스팅 값(자녀 값)을 표시합니다.

도움이 되시거나 다른 아이디어가 있으시면 아래에 코멘트를 남겨주세요.

언급URL : https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs