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

IT技术 reactjs
2021-03-30 23:20:20

我正在尝试将数据从子组件发送到它的父组件,如下所示:

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

谁能帮我找出问题所在?

PS 子组件正在从 json 文件创建下拉列表,我需要下拉列表来显示 json 数组的两个元素并排显示(例如:“aaa,english”作为首选!)

{  
   "languages":[  
      [  
         "aaa",
         "english"
      ],
      [  
         "aab",
         "swedish"
      ],
}
6个回答

这应该有效。在发送回props时,您将其作为对象发送,而不是将其作为值发送,或者将其用作父组件中的对象。其次,您需要格式化您的 json 对象以包含名称值对以及使用valueFieldtextField属性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 在他的回答Parent 中使用的语法

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" 
    }, 
  ] 
}
2021-05-23 23:20:20
@Jesse 功能组件也可以有方法。语法会有所不同,但本质将保持不变。
2021-06-02 23:20:20
@Sarah 我对代码做了一些小改动,包括将值绑定到 onChange 函数以及设置初始状态值。试试这个,告诉我它是否适合你
2021-06-03 23:20:20
@Sarah 在创建 dropDownList 时,您将其值指定为 this.state.selectedLanguage 并且未初始化为任何值。这可能是问题所在。您使用的是哪个 DropdownList 组件。如果我知道,也许我可以解决这个问题。
2021-06-17 23:20:20
谢谢 Shubham,您的回答解决了该问题,但未在下拉列表中显示所选项目。之后它是空的:/
2021-06-18 23:20:20

将数据从子组件传递到父组件

在父组件中:

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

在子组件中:

demoMethod(){
   this.props.sendData(value);
 }
不要忘记this.getData = this.getData.bind(this);在构造函数中,因为如果您想操作 getData 中的状态,您可能会得到 this.setState 不是一个函数。
2021-06-02 23:20:20

考虑到 React函数组件和使用Hooks越来越流行,我将举一个简单的例子来说明如何将数据从子组件传递到父组件

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

import React, { useState } from "react";

然后

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

并将 setChildData(在类组件中执行类似于 this.setState 的工作)传递给 Child

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

在子组件中,我们首先获得接收props

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

然后你可以像使用处理函数一样传递数据

const functionHandler = (data) => {

props.passChildData(data);

}

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

此示例显示如何将函数从子组件传递给父组件并使用此函数从子组件获取数据。