1

Есть два компонента "My1" и "My2" , есть функция myFunction(). Компоненты не имеют общего предка и не взаимосвязаны. Обои компонента похожи и ссылаются на одну и тужу функцию. Вопрос как сделать так , чтобы при нажатии на кнопку любого из компонента значения менялись у обоих компонентов. То есть у обоих компонентов должно поменяться слово "Не нажал " на "Нажал" при нажатии на любую кнопку.

Вот первый компонент:

import React from 'react';
import Myfunction from "./myFunction.js" ; // здесь лежит функция

class My1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        name: "Не нажал" 
    };
  }
  NewStateOne = () => {
    Myfunction(this.state);
    console.log(this.state.name)
    this.setState({name: this.state.name})
  }
  render () {
    return(
      <div>
        <div>{this.state.name}</div>
        <button onClick={this.NewStateOne}>Click</button>
      </div>
    )
  }
}
export default My1;

Вот второй компонент:

import React from 'react';
import Myfunction from "./myFunction.js" ; // здесь лежит функция

class My2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        name: "Не нажал" 
    };
  }
  NewStateTwo = () => {
    Myfunction(this.state);
    console.log(this.state.name)
    this.setState({name: this.state.name})
  }
  render () {
    return(
      <div>
        <div>{this.state.name}</div>
        <button onClick={this.NewStateTwo}>Click</button>
      </div>
    )
  }
}
export default My2;

Вот функция:

const Myfunction = (props) => {
  props.name = "Нажал";
  return props.name;
} 
export default Myfunction;

Я новичок в React буду рад любым идеям и критики.

4
  • Возможный дубликат вопроса: Как изменить значение стейта из внешней функции?
    – Vasily
    28 авг 2020 в 10:39
  • Я Вам уже ответил (на тот же самый вопрос) по ссылке выше, Вы передаете сам стейт в функцию когда Вам нужно передавать dispather (setState)
    – Vasily
    28 авг 2020 в 10:47
  • т. е. я нажимаю на одну, а текст меняется и на соседней? 28 авг 2020 в 17:36
  • @SergeiKirjanov да именно
    – Daniil
    28 авг 2020 в 18:21

1 ответ 1

0

Если я нажимаю на одну кнопку, а текст меняется и на соседней:

Стейт не принадлежит кнопкам, он общий, и располагается в компоненте, который является предком всех кнопок по дереву.

Этот общий предок является провайдером контекста -- кладет свой стейт в контекст.

Кнопки используют useContext.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.