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

Question

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

const ParentComponent = React.createClass({
    getInitialState() {
        반품 {
            언어: '',
        };
    },
    handlerLanguageCode: 함수(langValue) {
        this.setState({언어: langValue});
    },

    렌더링() {
         반품 (
                <div className="col-sm-9" >
                    <SelectLanguage onSelectLanguage={this.handleLanguage}/>
                </div>
        );
});

하위 구성요소는 다음과 같습니다.

export const SelectLanguage = React.createClass({
    getInitialState: 함수(){
        반품{
            선택된 코드: '',
            선택된언어: '',
        };
    },

    handlerLangChange: 함수(e) {
        var lang = this.state.selectedLanguage;
        var 코드 = this.state.selectedCode;
        this.props.onSelectLanguage({selectedLanguage: lang});
        this.props.onSelectLanguage({selectedCode: 코드});
    },

    렌더링() {
        var json = require("json!../언어.json");
        var jsonArray = json.언어;
        반품 (
            <div>
                <드롭다운리스트 참조='드롭다운'
                    데이터={jsonArray}
                    값={this.state.selectedLanguage}
                    대소문자 구분={false}
                    최소 길이={3}
                    필터='포함'
                    onChange={this.handleLangChange} />
            </div>
        );
    }
});

나에게 필요한 것은 상위 구성 요소에서 사용자가 선택한 값을 얻는 것입니다. 다음 오류가 발생합니다:

잡히지 않은 유형 오류: this.props.onSelectLanguage는 함수가 아닙니다

문제를 파악하는 데 도움을 줄 수 있는 사람이 있나요?

P.S. 하위 구성 요소가 json 파일에서 드롭다운을 생성하고 있습니다. json 배열의 두 요소를 나란히 표시하려면 드롭다운이 필요합니다(예: "aaa,english"가 선호됩니다!)

{
   "언어":[
      [
         "아아아",
         "영어"
      ],
      [
         "아브",
         "스웨덴어"
      ],
}

Answer 1

하위 구성 요소에서 상위 구성 요소로 데이터 전달

상위 구성 요소에서:

으아악

하위 구성 요소:

으아악

Answer 2

이렇게 하면 작동할 것입니다. 소품을 다시 보낼 때 값으로 보내거나 상위 구성 요소의 개체로 사용하는 대신 개체로 보냅니다. 둘째, 이름 값 쌍을 포함하고 DropdownList

的 valueField 和 textField 속성을 사용하도록 json 개체의 형식을 지정해야 합니다.

단답

부모님:

으아악

어린이:

으아악

---

세부정보:

편집자:

React.createClass가 v16.0부터 더 이상 사용되지 않는다는 점을 고려하면 React.Component를 확장하여 React 구성 요소를 만드는 것이 가장 좋습니다. 이 구문을 사용하여 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하는 것은 다음과 같습니다

부모님

으아악

아이들

으아악

---

OP가 답변에 사용한 createClass 구문을 사용하세요. 부모님

으아악

아이들

으아악

JSON:

으아악