Блог

Главная - Вопросы по программированию - Как создать текстовое поле в модальном, созданном с использованием контекста в React?

Как создать текстовое поле в модальном, созданном с использованием контекста в React?

#reactjs #react-hooks #react-context

#reactjs #реагирующие хуки #реагировать-контекст

Вопрос:

Кажется, такие события, как onChange, не работают в контекстах? Он выполняется, но символы не соединяются вместе.

Я пытаюсь создать модальное через контекст. Он появляется, но изменение текста не реагирует.

      const [username, setUsername] = useState<string>('');
      let { handleModal } = useContext(ModalContext);
    
      const toggleUpdateUsernamePopup = () => {
        handleModal({content: <div>
          <TextBox placeholder={t('unplaceholder')} value={username} onChange={handleModalTextChange} autoFocus type='text' />
          <SubmitButton onClick={submit} text={t('Update', { ns: 'common' })} />
        </div>,description:t('usrupddes'),title:t('usrupd')})
      };
    
      const handleModalTextChange = e => {
        console.log(`e`, e.target.valuee)
        setUsername(e.target.value);
      };
.
.
.
.
.
.
.
  return (
      <ActionButtonContainer btnText={t('usrupd')} onClick={toggleUpdateUsernamePopup} />
  );

Комментарии:

1. Дополнительный контекст будет иметь большое значение. «Он выполняется, но символы не соединяются вместе». Можете ли вы пояснить, что это значит? Кроме того, это ваш собственный модальный хук или сторонняя библиотека?

2. Пожалуйста, добавьте больше деталей. Фрагмента кода недостаточно. Например, нет confirmUsername определения функции.

3. @BrendanBond Я пытаюсь создать управляемый компонент / текстовое поле в модальном. Обычно это работает, но когда я перемещаю модальное поле в хук с помощью контекста, провайдера и портала, результаты получаются странными. Я предполагаю, что проблема в том, что путь к модальному сделан. Я думаю, может быть, он повторно отображает всю страницу, а также каждый раз переписывает модальное значение как пустое. * Его пользовательский

4. @SerhiiHolinei подтверждение не важно, вот полный код, связанный с этой проблемой: Модальный: pastebin.com/ZCneWC1A Контекст: pastebin.com/rjwGBELH Страница: pastebin.com/9PJ1rPrq

Ответ №1:

Как предлагали другие, пожалуйста, поделитесь более подробной информацией о вашем коде. из вашего фрагмента не так ясно

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

обычно, когда вы работаете с модалами, вам необходимо иметь компонент (например, myModal), который вы экспортируете.

затем на вашем верхнем уровне (например «App.js «) возможно, вы захотите добавить состояние:

 const [isModalOpen, setIsModalOpen] = useState(false)

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

в вашем App.js , возможно, вы захотите использовать условный рендеринг.

 {isModalOpen amp;amp; <MyModal />

таким образом, всякий раз, когда ваше значение «isModalOpen» равно true, модальное значение будет видно.
затем вы можете отправить дополнительные функции в «myModal» и изменить другие состояния в вашем приложении.

вам нужно будет «внедрить» переменные в свои контексты и захватить их в свой «myModal» с помощью useContext.

Ответ №2:

Обнаружил, что это невозможно. Состояние пока не переходит в контекст.

Метки: ,