Есть два компонента "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;
Средний
