如何在ReactJS中将更改后的状态从子组件传递给其父组件

Question

我试图了解如何将更改状态从子组件传递到ReactJS中的父组件？到目前为止，以下代码更改了子状态而不是父状态，任何线索我做错了什么？

我正在使用redux从mongodb获得产品阵列。

产品数组示例：

[
    {
        “_id”: “2331”, 
        “department”: “Shoes”,
        “category”: “Shoes/Women/Pumps”,
        “name”: “Calvin Klein”,
        “title”: “Evening Platform Pumps”,
        “description”: “Perfect for a casual night out or a formal event.”,
        “style”: “Designer”,
        "colors": ["red","yellow","red","black"]
    },

    {
      “_id”: “30671”, 
      “department”: “Shoes”,
      “category”: “Shoes/Women/Pumps”,
      “name”: “zara”,
      “title”: “Evening Platform Pumps”,
      “description”: “Perfect for a casual night out or a formal event.”,
      “style”: “Designer”,
      "colors": ["red","yellow","red","black"]
    }
]

父组件

  import React, { Component } from 'react'

  class Parent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        products: [],
      };
    }

    componentDidMount() {
      this.props.getProducts();
    }

    componentDidUpdate(prevProps, prevState) {
      if (this.props.product.products !== prevState.products) {
        this.setState({ products: this.props.product.products });
      }
    }

    onUpdateProducts = (e) => {
      const newProducts = this.state.products;
      this.props.updateProductName(newProducts);
    };


    render() {
      const { products } = this.state;

      if (isEmpty(products)) {
        productContent = (
          <div>
            <p className="lead text-muted">Error Empty Products </p>
          </div>
        );
      } else {
        const productArr = products.map((product) => (
          <Child key={product._id} product={product} />
        ));

        productContent = (
          <div>
            {productArr}
          </div>
        );
      }

      return (
        <div className="container">
          {productContent}
          <div className="row">
              <div className="col-md-12">
                <button className="btn " onClick={this.onUpdateProducts}>
                  Submit
                </button>
              </div>
            </div>
        </div>
      )
    }
  }

  const mapStateToProps = (state) => ({
    product: state.product
  });

  export default connect(mapStateToProps, {
    getProducts,updateProductName
  })(Parent);

子组件

  import React, { Component } from 'react'

  export default class Child extends Component {
    constructor(props) {
      super(props);
      this.state = {
        product: this.props.product,
      };
    }

    componentDidUpdate(prevProps, prevState) {
      if (this.props.product !== prevProps.product) {
        this.setState({
          product: this.props.product
        });
      }
    }

    onChangeProductName = (e) => {
      const newProduct = Object.assign({}, this.state.product, {
        name: e.target.value
      });

      this.setState({ product: newProduct }, function() {
        console.log('onChangeProductName: ', this.state.product);
      });
    };

    render() {
      const { product } = this.state;
      return (
        <div>
          <TextInput
              placeholder="Product Name"
              name="prd_name"
              value={product.name}
              onChange={this.onChangeProductName}
            />
        </div>
      )
    }
  }

Answer 1

子组件有两种方式来更新父组件：

1. 在不使用Redux的情况下，您可以将函数作为子组件的prop传递，因此子组件可以调用此函数来更新父组件。
2. 将数据存储在Redux存储中。子组件调度一个更新Redux状态的操作，其中父组件获取数据。

Answer 2

一个简单的例子可以解释将更改后的状态从子节点传递给父节点的概念。

组件A：

export default class A extends Component{

  //This is a callback
  handleStateChange = (value) ={
    console.log("value", value);//you get the value here when state changes in B(Child) component
  }
  render(){
    return(
      <div>
        <B handleStateChange={this.handleStateChange} />
      </div>
    )
  }
}

组件B：

export Class B extends Component{
  constructor(props){
    super(props);
    this.state={
       value: "01"
    }
  }

  handleButton = () => {
     const value = "02";
     this.setState({
       value: "02"
     });
     this.props.handleStateChange(value);
  }
  render(){
    return(
      <div>
        <button onClick={this.handleButton} />
      </div>
    )
  }
}

或者你可以直接传递状态，如果你调用this.props.handleStateChange（this.state.value）;如果要传递更新状态，则直接在任何事件处理程序上呈现

正如@Ying zuo所提到的，你需要使用redux来获取父组件中子组件的更改状态值。

当子组件中的状态发生更改时，您通过将值作为参数传递来进行redux操作调用，并将其设置为reducer中的状态并获取父组件中的状态

希望能解释这个概念。

Answer 3

你必须传递一个函数。

在子组件中，您将状态设置为等于props值，然后您正在更新状态。这与父类没有任何联系 - 你也不应该只是旁边修改道具。

解决方案是将函数从父级传递给子级。此函数将更新父状态，并且由于您将父状态传递给子状态，因此它也将更新。

因此，在您的父类中，您可以执行以下操作：

onChangeProductName = (value, i) => {
  const new_product_array = [...this.state.products];
  new_product_array[i].name = value;

  this.setState({ products: new_product_array});
};

您需要将此传递给孩子

const productArr = products.map((product, i) => (
   <Child
      key={product._id}
      product={product} onChangeName={this.onChangeProductName.bind(this)}
      index={i} />
));

然后在孩子中称呼它

<TextInput
  placeholder="Product Name"
  name="prd_name"
  value={product.name}
  onChange={() => this.props.onChangeName(product, this.props.index)}
/>

然后子组件不需要所有状态跟踪。