Как я могу предотвратить повторный рендеринг страницы с перехватами в React? - PullRequest
Новая
       17

Как я могу предотвратить повторный рендеринг страницы с перехватами в React?

1 голос
/ 01 июня 2019

Я пытаюсь найти решение для этой конкретной проблемы, но я могу найти его ... в новинку с этим у меня есть этот код: 

    import React, { Fragment, useState } from 'react'
import '../../media/style/modal.css'


export default function Modal(props) {
  const { activateModal } = props
const[values, setValues]= useState({name:'',email:''})

  if (activateModal) {
    document.getElementById('modals').click()
  }

  function handleValues(){
    setValues({
      name:document.getElementById('name').value,
      email:document.getElementById('email').value
    })
  }

  return (
    <Fragment>

      <button type="button" id="modals" style={{ display: 'none' }} data-toggle="modal" data-target="#exampleModalCenter">
        Launch demo modal
</button>


      <div className="modal fade" id="exampleModalCenter" tabIndex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <form onSubmit={handleSubmit}>
            <div className="container">
              <div className="row">
                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div className="row justify-content-center">
                <h5 className="modal-title" id="modalTitle"><span style={{color:'rgb(197,115,199)'}}>get- </span>started</h5>
              </div>
              <div className="row justify-content-center">
                <input type="text" id="name" name="name"  onChange={handleValues} />
                <input type="email"  id="email" name="email" />
              </div>
              <div className="row justify-content-center">

                <button type="submit" id="btn2">Send</button>

              </div>
            </div>

            </form>





          </div>
        </div>
      </div>

    </Fragment>
  )

}

Когда я пишу что-то на входе, моя страницаre Renders ... и я не знаю, как остановить это поведение, любая идея? ... Я пытаюсь использовать useRef, но я не знаю, правильно ли я его использую, поэтому я не получаю желаемого эффекта

1 Ответ

4 голосов
/ 02 июня 2019

Я скопировал ваш код в песочницу и исправил его для вас https://codesandbox.io/s/agitated-snow-lls4g?fontsize=14

Просто чтобы уточнить, useRef не будет повторно визуализировать, даже если вы изменили его. Обновленное значение будет отображаться только тогда, когда что-то еще вызывает повторную визуализацию. так что useState было правильным использованием.

Хотя я не изменил это для вас (чтобы показать, что это возможно без него), я бы настоятельно рекомендовал поместить электронную почту и имя в их собственное состояние использования, чтобы изменение одного не изменило другое. Я также не получал бы значения из document.getElementById, а использовал бы event.target.value, который передается из handleChange, и предоставлял handleChange для каждого элемента. Если у вас есть несколько элементов, используйте функциональное программирование для создания их функций. (например, handleEmailChange = handleChange('email'), а затем handleChange - это функция, которая возвращает функцию (также известную как каррирование).

Для уточнения:

  • useRef для сохранения данных между рендерами (обновление не запускает ре-рендеринг)

  • useState для сохранения данных между визуализациями (обновление запустит повторный рендеринг)

  • каждый вход должен, вероятно, использовать свое собственное состояние, чтобы избежать изменения значений, на которые могут подписаться другие компоненты и эффекты.

  • используйте currying для вычисления handleChange для каждого входа
...