Javascript 如何防止在React中使用钩子重新呈现页面？

我想为这个特殊的问题找到解决办法，但我能找到。。。在新版本中，我有以下代码：

    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>
  )

}

---

当我在输入中写入内容时，我的页面会重新呈现。。。我不知道如何阻止这种行为，知道吗？。。。我尝试使用useRef，但我不知道我是否正确使用了它，因此我没有达到预期效果

我将您的代码复制到沙箱中，并为您进行了修复

只是澄清一下，useRef不会重新渲染，即使您对其进行了修改。更新后的值仅在其他内容触发重新渲染时显示。所以useState是正确的用法

虽然我没有为你改变这一点，以表明没有它是可能的，但我强烈建议将电子邮件和名称放在他们自己的useState中，这样改变一个不会改变另一个。我也不会从document.getElementById获取值，而是使用从handleChange传入的event.target.value，并为每个元素提供handleChange。如果有多个元素，请使用函数式编程来创建它们的函数。e、 g.handleEmailChange=handleChange'email'，然后handleChange是一个返回函数（也称为currying）的函数

澄清：

useRef用于在渲染器之间保留数据更新不会触发重新渲染 useState用于在渲染器之间保留数据更新将触发重新渲染

每个输入可能都应该使用自己的状态，以避免更改其他组件和效果可能订阅的值

使用currying为每个输入计算handleChange

---

我把你的代码复制到一个沙箱中，并为你修复了它

只是澄清一下，useRef不会重新渲染，即使您对其进行了修改。更新后的值仅在其他内容触发重新渲染时显示。所以useState是正确的用法

虽然我没有为你改变这一点，以表明没有它是可能的，但我强烈建议将电子邮件和名称放在他们自己的useState中，这样改变一个不会改变另一个。我也不会从document.getElementById获取值，而是使用从handleChange传入的event.target.value，并为每个元素提供handleChange。如果有多个元素，请使用函数式编程来创建它们的函数。e、 g.handleEmailChange=handleChange'email'，然后handleChange是一个返回函数（也称为currying）的函数

澄清：

useRef用于在渲染器之间保留数据更新不会触发重新渲染 useState用于在渲染器之间保留数据更新将触发重新渲染

每个输入可能都应该使用自己的状态，以避免更改其他组件和效果可能订阅的值

使用currying为每个输入计算handleChange

---

你应该发布你的整个文件可能是时候将你的示例应用程序放在显示此行为的页面上：当我在输入中写入内容时，我的页面重新呈现你应该发布你的整个文件可能是时候将你的示例应用程序放在显示此行为的页面上：当我在输入中写入内容时，我的页面重新呈现，我需要使用useRef来避免重新渲染，但我不知道如何，我需要使用useRef来避免重新渲染，但我不知道如何