Блог

Я пытаюсь сохранить значение const, чтобы его можно было использовать в других компонентах. В этом примере я хочу, например, иметь возможность удерживать const age файл из Form.jsx для отображения в App.js использование {возраст}.

Я исключил файлы импорта для сокращения кода, но вот мой пример

Форма.jsx

   function Form() {
  const [age, setAge] = React.useState(0);
  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl>
        <Select value={age} onChange={handleChange}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;
 

App.js

 function App() {

  
  return (
    <div>
      <Form />
      <p>{age}</p>
    </div>
  );
}
 

Если бы я выбрал MenuItem со значением 20, функция App отобразилась <p>20</p> бы.
Спасибо за любой совет.

Вы можете сделать это с помощью обратного <App /> вызова, но я считаю, что лучше всего, чтобы родительский элемент был «единственным источником истины», когда дело доходит до состояния.

(больше чтения и кода: https://webomnizz.com/change-parent-component-state-from-child-using-hooks-in-react /)

 function Form(props) {
    const handleChange = (event) => {
        // Here, we invoke the callback with the new value
        props.onChange(event.target.value);
    }
  return (
    <div>
      <FormControl>
        <Select value={props.age} onChange={handleChange}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;
 

 function App() {
  const [age, setAge] = React.useState(0);
  const handleChange = (value) => {
    setAge(value);
  };

  return (
    <div>
      <Form age={age} onChange={handleChange}  />
      <p>{age}</p>
    </div>
  );
}
 

В этой ситуации я сразу вижу два варианта:

• Вы можете поднять состояние на один уровень выше

Это age будет переменная в App компоненте, и вы можете обновлять ее каждый раз Form , когда компонент изменяется. Что — то вроде этого:

   function Form({age, setAge}) {
  return (
    <div>
      <FormControl>
        <Select value={age} onChange={(event) => setAge(event.target.value)}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;
 

 function App() {

  const [age, setAge] = React.useState(0);
  
  return (
    <div>
      <Form age={age} setAge={setAge} />
      <p>{age}</p>
    </div>
  );
}
 

При вышеуказанной настройке age он доступен как App в компоненте, так и Form в компоненте, и оба они будут синхронизированы.

• Вы можете использовать библиотеку состояний (например, redux) для создания глобального хранилища и использовать ее для распространения age переменной в любом месте вашего приложения, а не только в App компоненте. Но это слишком много для описанного выше сценария, и я бы не рекомендовал этого делать.

Вы не можете передавать данные таким образом из дочернего компонента в родительский, потому что созданная переменная не входит в область действия App.js компонента. Для передачи данных от дочернего компонента к родительскому компоненту создайте переменную состояния в родительском компоненте App.js и передайте функцию обработчика событий, которая устанавливает значение для дочернего компонента.

App.jsx

 function App() {
  const [age, setAge] = React.useState(0)

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <h2>Age:{age}</h2>
      <Form age={age} handleChange={handleChange}/>
    </div>
  );
}
 

Form.jsx

   function Form({age, handleChange}) {

  return (
    <div>
      <FormControl>
        <Select value={age} onChange={handleChange}>
          <MenuItem value={0}>None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default Form;
 

вот аналогичный рабочий пример:- https://codesandbox.io/s/keen-night-zfsig

Спасибо всем за публикацию ваших решений. Но, как я упоминал в описании сообщения, я хочу, чтобы {age} использовался в других компонентах, под этим я подразумеваю все компоненты. Допустим, у меня есть const sumAge = ({age} {age}) , будет ли сумма доступна в других компонентах сейчас?