如何防止在回复中用钩子重新呈现页面

5. 我正在寻找一个解决这个问题的方法 , 但是我可以找到它。

    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 , 但是我不知道我是否正确使用它 , 所以我没有得到想要的效果


EN From: How can i prevent re-render the page with hooks in React

4 Comments

  1. 现在是时候把你的示例应用程序放在演示这种行为的 React Playground 上了 : 当我在输入中写东西时 , 我的页面会重新显示
  2. 我把你的代码复制到一个沙箱里 , 然后帮你修好了

    为了澄清起见 , useRef 将不会重新呈现 , 即使您将它变异。 更新值只有在其他触发重新呈现时才会显示。 所以使用 useState 是正确的用法。

    虽然我没有为你改变这个 ( 以表明没有它是可能的 ) , 我强烈建议把电子邮件和名字放在他们自己的使用国 , 以便改变一个不会改变另一个。 我也不会从 Document.GetElementById 获取值 , 而是使用事件。 如果有多个元素 , 请使用函数编程来创建它们的函数。 (例如 handleEmailChange = handleChange('email') 然后手工更改是返回函数 ( 也称为 currying ) 的函数。

    澄清 :

    • useRef 在呈现之间保存数据 ( 更新不会引发重新渲染 )
    • useState 在呈现之间保存数据 ( 更新将引发重新渲染 )

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

    • 使用 currying 计算每个输入的手变
    1. 我需要使用一个 useRef 来避免重新渲染 , 但我不知道如何

More articles:

  • 如何只在最后一个 XHR 完成后更新 / 重新呈现组件?
  • 如何在父态发生变化时防止子组件重新加载
  • 如何在保留文件输入的同时防止表单提交后页面重定向 / 刷新 ? JQuery
  • 如何滚动一个页面回复本地
  • 如何重新呈现组件而不是调用构造函数?
  • 如何使我的兄弟姐妹元素在悬停一个元素时呈现黑色 ?
  • angularjs: 页面显示 NaNN 并在从服务器获取数据时显示数据。 如何防止 ?
  • 当我滚动到页面内部的 div 底部时 , 如何防止页面滚动 ?
  • 如何使用带有 jQuery 的 Meteor 回调自动滚动到 div 每次内容重新呈现的底部 ?
  • 重定向更改页面 URL , 但不要呈现新页面
  • 重新加载页面时 , 如何使用现有数据刷新谷歌地图标记和地图 ?
  • 如何在页面加载后自动运行一个函数?
  • 连接到存储区但不反应重新呈现视图的组件
  • 如何根据状态更改重新呈现可数据组件
  • 如何区分 jsx 部分和呈现函数
  • 如何正确设置组件的状态 , 而不会每次重新显示它时就被擦除 ?
  • 如何在页面之间传输数据 ?
  • 防止 GIF 文件在另一个组件使用时重新加载
  • 如何用 JavaScript 打印呈现的 HTML 页面的一部分?
  • 如何在不重新加载的情况下从类别页面添加产品
  • 如何区分清新的页面?
  • 如何在两个独立页面之间创建平滑滚动加载效果
  • 如何使用 jQuery 重新启用 div 上的单击事件 ?
  • JQuery - 如何取消表单提交防止在条件是真实的情况下发生默认
  • 如何通过减速器通过点击更新组件中的状态 , 然后在容器中更新
  • 如何进入对象阵列中的类?
  • 什么会导致元素的视觉和交互组件在 iFrame 中的不同位置呈现 ?
  • 如何保存 / 读取 HTML 中定期打开的页面的 cookie 信息?
  • 如何强制页面在输入新记录后重新刷新数据 ?
  • 如何使用 Laravel 4.1 为外部 WE 页面设置小部件