更改 React 父组件状态

Question

我正在尝试创建一个简单的 SPA（没有路由器）。它还有一个简单的结构：每个部分一个组件：

• 首页
• 服务
• 产品
  • 产品
  • 模态
• 联系我们

如您所见，组件 Products 有两个子组件 Product 和 Modal。这些被迭代了很多次，因为 JSON 对象有：

Products.js

import React, { Component } from "react";
import ReactHtmlParser from "react-html-parser";
import "./Products.css";
import { products } from "./products.json";

import Product from "./Product/Product";
import Modal from "./Modal/Modal";

class Products extends Component {
  render() {
    return (
      <section id='products'>
        <div className='container'>
          <div className='row'>
            {products.map(product => {
              return (
                <div>
                  <Product
                    image={"/img/" + product.image}
                    name={product.name}
                    target={product.target}
                  />
                  <Modal
                    id={product.target}
                    title={product.name}
                    body={ReactHtmlParser(product.body)}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }
}

export default Products;

每个产品都有一个 More Info 按钮，用于打开模式，而这还有另一个按钮Budget（“Presupuestar”）：

该功能应该“改变”联系我们组件的状态（一个简单的联系我们表单）：

组件有如下代码：

Contact.js

import React, { Component } from "react";
import "./Contact.css";

class Contact extends Component {
    constructor() {
        super();

        this.state = { budget: "Contact" };
    }
    render() {
        return (
            <section id='contact'>
                <div className='container'>
                    <div className='row'>
                        <div className='col-xs-12 col-md-6'>
                            <div className='contact-form'>
                                <form>
                                    ...
                                    {/* Subject */}
                                    <div className='form-group'>
                                        <div className='input-group'>
                                          <span className='input-group-addon' />
                                          <input
                                            type='text'
                                            className='form-control'
                                            id='subject'
                                            aria-describedby='Subject'
                                            placeholder='Subject'
                                            readonly='readonly'
                                            value={this.state.budget}
                                          />
                                        </div>
                                        {/* /form-group */}
                                    </div>
                                    {/* /Subject */}
                                    ...
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );
    }
}

我想我应该在 Modal 组件中创建一个函数，以在 Budget 中使用 onClick="setSubject" 触发（"Presupuestar" ） 按钮。我不知道如何改变其他组件的状态。

快速总结：我必须进行以下状态更新：

我正在阅读this similar question，但我不知道如何在我的场景中应用。有什么想法吗？

Answer 1

我认为您应该在 App 组件中使用按钮的 clickHandler 函数来包装整个组件，然后将其传递给 Products 组件，然后传递给 Modal 组件，但这不是一个好习惯, 或者你可以使用Redux一个状态管理系统，让你通过整个应用控制你的状态。

Answer 2

首先，你不需要另一个组件的change the state 函数。做到这一点的聪明方法是使用中介将 2 个组件连接在一起。有两种方法可以解决这个问题。

1. 最简单的方法是您可以通过 URL 传输主题（URL 是“中间件”）。当您单击按钮 Presupuestar 时，您可以将 URL 更改为页面联系人，如下所示：

/contact?subject=whatever you want

然后，在 Contact 组件中，您只需要解析 URL 即可获取主题（您可以查看 this question 以了解如何从 URL 解析）。你可以看到my example。

1. 第二种方法是创建一个服务，使用单例模式将主题从Modal转移到Contact形式。你可以看到my example。

Answer 3

你可以这样实现

创建一个包含所有这三个组件的主应用程序组件

在应用组件“changeContacts”中添加功能

将其发送给产品和联系人

这是一个解释

class App extends Component {
  render() {
    return (
      <div>
        <Contact ref="contacts"/>
        <Products changeContacts={this.changeContacts} />
      </div>
    );
  }
  changeContacts = (newState) => {
    this.refs.contacts.changeState(newState)
  };
}

class Contact extends Component {
    state = { text:"Old Text" }
    render() { 
        return ( <div style={{fontSize:50,backgroundColor:'red'}}>{this.state.text}</div> );
    }
    changeState = (newState) =>{
        this.setState(newState);
    }
}
class Modal extends Component {
  render() { 
    return ( <div onClick={() => this.props.onClick({text:"New State Text"})}>This is a modal</div> );
  }
}
class Products extends Component {
    state = {  }
    render() { 
        return ( <div>
            <h1>Products List</h1>
            <Modal onClick={this.props.changeContacts} />
            <Modal onClick={this.props.changeContacts}/>
            <Modal onClick={this.props.changeContacts}/>
        </div> );
    }
}