Question

我有一个父类组件和一个子功能组件。我们如何将值从这种类型的子组件传递到父组件-我已经看到了一些将值从子类组件传递到父类组件的示例。

父组件

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
    }

    render(){
        //can console log the return value from the ChildComponent here if needed 
        return(
            <React.Fragment>
                <ChildComponent indexval = {this.state.data.index} />                                
            </React.Fragment>
        )
    }
}

export default ParentComponent;

道具indexval向下传递到子组件，该子组件是如下所示的功能组件

子组件

import React from 'react';;
import Button from './Button/Button';

function ChildComponent(props) {
    const newVal=(index) => {
        let retVal = index + 1; //the retValue need to pass to the parent component
    }
    return (
        <React.Fragment>
            <Button onClick={() => newVal(props.index)}>Click</Button>
        </React.Fragment>
    )
}

您会注意到ChildComponent的值retVal需要传递给父组件。我们如何实现这一目标

Answer 1

父组件

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
    }

    handleClick = (value) => {
       // handle changes from child
       console.log(value)
    }
    render(){
        return(
            <React.Fragment>
             // 1. we pass function for child on props
                <ChildComponent handleClick={this.handleClick} indexval = {this.state.data.index} />                                
            </React.Fragment>
        )
    }
}

export default ParentComponent;

子组件

import React from 'react';;
import Button from './Button/Button';

function ChildComponent(props) {
    const newVal=(index) => {
        let retVal = index + 1;
        // 2. do calculations and send it to parent
        props.handleClick(retVal);
    }
    return (
        <React.Fragment>
            <Button onClick={() => newVal(props.index)}>Click</Button>
        </React.Fragment>
    )
}

Answer 2

您可以将调度程序传递给子组件，该子组件又可以调用此调度程序来传递您想要的值：

父类组件：

import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [] // An index value is in this state
        };
        this.updateParentState = this.updateParentState.bind(this);
    }
    // dispatcher to pass as a prop
    updateParentState(val){
      this.setState({index:val});
    }

    render(){
        //can console log the return value from the ChildComponent here if needed 
        return(
            <React.Fragment>
                <ChildComponent 
                      indexval = {this.state.data.index} 
                      updateParent={this.updateParentState} />
            </React.Fragment>
        )
    }
}

export default ParentComponent;

子组件：

import React from 'react';
import Button from './Button/Button';

function ChildComponent(props) {

    const newVal=() => {
        return props.index + 1; //do it this way
    }
    return (
        <React.Fragment>
            <Button onClick={() => props.updateParent(newVal())}>Click</Button>
        </React.Fragment>
    )
}
export default ChildComponent;

Answer 3

此示例显示了如何使用父级和子级组件。

class Parent extends React.Component {
  state={name:"Hello"}
  handleClick = () => {
    this.setState({name:"Welcome to the world of React."})
  };
  render() {
    return (
      <div className="App">
        <Child name={this.state.name} handleClick={this.handleClick} />
      </div>
    );
  }
}
function Child({name, handleClick}){
    return (
      <div>
       <h2>{name}</h2>
       <button onClick={handleClick}>Change</button>
      </div>
    )
  }

如何将值从子功能组件传递到父类组件？

3 个答案:

父类组件：

子组件：