这应该有用。当发送回道具时，您将其作为对象发送，而不是将其作为值发送，或者将其作为父组件中的对象使用。其次，你需要格式化json对象，以包含名称值对，并使用DropdownList的valueField和textField属性

简短的回答

家长:

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

孩子:

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

详细:

编辑:

考虑到反应。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 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>            
        );
    }
}

使用OP在回答中使用的createClass语法 父

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

在这里，我试图用最简单的方式解释: 我正在从子组件更新父组件计数器。

父组件(propapp .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>
    </>
   )
}

单击Update父组件并查看神奇的效果

在React v16.8+函数组件中，你可以使用useState()来创建一个函数状态，让你更新父状态，然后将它作为props属性传递给子组件，然后在子组件中你可以触发父状态函数，下面是一个工作代码片段:

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>

我发现了如何从父母中的子组件中获取数据的方法，当我需要它时。

家长:

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

这个例子展示了如何将函数从子组件传递给父组件，并使用该函数从子组件获取数据。

在React钩子中父组件和子组件之间传递数据

将函数传递给子函数， 并通过调用父函数来等待子函数返回值

父母(. . / app.js)

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

孩子(. . /组件/ 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>

    </>
  )
}

结果

点击按钮后，父类显示“fm99.8”的sting值(该 孩子的价值)

请在下面评论，如果这对你有帮助，或者你有其他的想法

考虑到React函数组件和使用钩子现在越来越流行，我将给出一个简单的例子，说明如何将数据从子组件传递给父组件

在父函数组件中，我们将有:

import React, { useState } from "react";

then

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

和传递setChildData(它们的工作与此类似。setState在类组件)到子

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

在子组件中，我们首先获得接收道具

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

然后，您可以像使用处理程序函数一样以任何方式传递数据

const functionHandler = (data) => {

props.passChildData(data);

}