我试图从一个子组件发送数据到它的父母如下:

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,英语”作为首选!)

{  
   "languages":[  
      [  
         "aaa",
         "english"
      ],
      [  
         "aab",
         "swedish"
      ],
}

当前回答

您甚至可以避免父函数直接更新状态

在父组件中:

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

在子组件中:

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

其他回答

反应。在React的新版本中,createClass方法已经被弃用了,你可以用下面的方法很简单地让一个函数组件和另一个类组件来维护状态:

家长:

const ParentComp = () => { getLanguage = (language) => { console.log('父组件中的语言:',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> ); } };

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

家长:

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

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

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

您甚至可以避免父函数直接更新状态

在父组件中:

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

在子组件中:

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

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

父组件(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父组件并查看神奇的效果