Изменить состояние родительского компонента React

Question

Я пытаюсь создать простой SPA (без роутера).Он также имеет простую структуру: компонент для каждого раздела:

• Главная
• Услуги
• Продукты
  • Продукты
  • Модальные
• Свяжитесь с нами

Как видите компонент Продукты имеет два подкомпонента Продукт и Модальные .Они повторяются столько раз, сколько объектов 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;

Каждый продукт имеет кнопку Подробнее открывает модальное окно, и у него есть еще одна кнопка Бюджет ( "Presupuestar" ):

Эта функция должна "изменять состояние"из Свяжитесь с нами компонент (простая форма для связи с нами):

Компонент имеет следующий код:

Контакт.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>
        );
    }
}

Полагаю, мне нужно создать функцию в Модальном компоненте, который будет запускаться с onClick="setSubject" в Бюджете ( Кнопка "Presupuestar" ).Чего я не знаю, так это как изменить состояние другого компонента.

Краткое резюме: я должен сделать следующее обновление состояния:

Я читал этот похожий вопрос но я не сделалне понимаю, как применить в моем сценарии.Есть идеи?

Answer 1

Вы можете достичь этого следующим образом.

Создайте основной компонент приложения, который будет содержать все эти три компонента Добавьте функцию в компонент приложения "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> );
    }
}

Answer 2

Прежде всего, вам не нужна функция для change the state другого компонента. Умный способ сделать это - использовать вещь-посредник для соединения двух компонентов. Есть два способа решения этой проблемы.

1. Самый простой способ - передать тему через URL (URL-адрес " вещь-посредник "). Когда вы нажимаете кнопку Presupuestar , вы можете изменить URL-адрес для контакта на странице следующим образом:

/contact?subject=whatever you want

Затем, на компоненте Contact, вам просто нужно проанализировать URL, чтобы получить тему (вы можете увидеть этот вопрос , чтобы узнать, как анализировать с URL). Вы можете видеть мой пример .

2. Вторым способом является создание службы, использующей шаблон singleton для переноса темы из Модальная в Форма контакта . Вы можете видеть мой пример .

Answer 3

Думаю, вам следует либо использовать функцию clickHandler кнопки в компоненте App, которая обернет все компоненты, а затем передаст их компоненту Products, а затем компоненту Modal, но это не очень хорошая практика. , Или вы можете использовать Redux систему управления состоянием, которая позволяет вам контролировать свое состояние через все приложение.