Как изменить значение стейта из внешней функции?

Question

Есть компонент и функция.

В компоненте есть state, функция изменяет значение state.

Как новое значение state передать компоненту именно с помощью функции?

То есть при нажатие на кнопку, слово "Не нажал" изменилось на "Нажал".

Заранее спасибо.

Компонент:

import Myfunction from "./myFunction.js"; // здесь лежит функция
class Add extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        name: "Не нажал" 
    };
  }
  Newstate = () => {
    Myfunction(this.state.name);
  }
  render () {
    return(
      <div>
        <div>{this.state.name}</div>
        <button onClick={this.Newstate}>Click</button>
      </div>
    )
  }
}
export default Add;

Функция:

const Myfunction = (mystate) => {
  console.log({mystate});
  mystate = "Нажал";
  console.log({mystate});
}
export default Myfunction;

Мне нужно чтобы значение state изменяла именно функция чтобы я мог в другом компоненте просто вызвать эту функцию не передавая ей какие либо значения и она бы изменила значение state в моём компоненте.

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

В первом компоненте есть две кнопки по клике на первую кнопку запускается функция(таймер с отсчётом), по клике на вторую кнопку запускается функция которая останавливает предыдущую функцию(таймер).

Во втором компоненте есть кнопка которая должна останавливать таймер то есть при нажатие на эту кнопку вызывается функция остановки таймера.

Answer 1

Покажу на хуках, но большой разницы с классами быть не должно. Там так же нужно будет передать в функцию именно dispatcher (setState), а не сам стейт, как Вы делаете сейчас.

Компонент:

import React, { useSate } from "react"
import { handleClick } from "./path/to/file"
// ... остальные импорты

const YourComponent = () => {    
  const [state, setState] = useState({ name: "Не нажал" })
    
  return (    
    <div>
      <div>{state.name}</div>
      <button onClick={() => handleClick(setState)}>Click</button>
    </div>
  )
}

export default YourComponent

Функция:

export const handleClick = setState => {
  setState({ name: "Нажал" })
}

Так же на вид Ваша функция Myfunction не является конструктором и/или компонентом, поэтому называть ее с большой буквы особого смысла нет.

Что бы повысить читабельность Ваших названий можно задействовать camelCase myFunction, snake_case my_function, или kebab-case my-function.

БЛОГ НА HUSL

Как изменить значение стейта из внешней функции?

Ответы (1 шт):