时间戳

首页 > 解决方案 > DOM 不会在值更改时更新

reactjs - DOM 不会在值更改时更新

问题描述

我正在尝试使用 next.js 项目使用功能组件设置一个简单的表单：

const Form = () => {

    let error = false 
    const handleNameSubmit = (e) =>  {
        e.preventDefault()

        const name = e.target.name.value.trim()

        if(!! name.length) {
            error = false
        } else {
            error = 'Please enter your name'
        }
    }

    return (
        <>
            <form onSubmit={handleNameSubmit}>
                <h1>I’d like to know how to address you, 
                please type in your name</h1>
                <input type="text" name="name" placeholder="Your name"/>
                {!!error && (<p>{error}</p>)}
                <button type="submit">Next</button>
            </form>
        </>
    )
}

我正在做一些简单的验证，即检查是否在名称输入中输入了任何值，如果该字段为空，则显示错误。

但是，当我将页面加载时的错误值设置为某个值时，它会显示在 DOM 中，但如果我稍后对其进行操作，则 DOM 不会更新。我是 next.js 的新手。

标签： reactjsnext.js

解决方案

你必须使用state变量来实现你的目标。只需转换error状态变量即可。

const Form = () => {
  const [error, setError] = useState(false);

  const handleNameSubmit = (e) => {
    e.preventDefault();
    const name = e.target.name.value.trim();
    setError(name.length ? false : 'Please enter your name');
  }

  return (
    <>
      <form onSubmit={handleNameSubmit}>
        <h1>I’d like to know how to address you,
                please type in your name</h1>
        <input type="text" name="name" placeholder="Your name" />
        <button type="submit">Next</button>
        {error && <p>{error}</p>}
      </form>
    </>
  )
}

我为你创建了一个小演示。
https://stackblitz.com/edit/react-7kat5c

希望对你有帮助！

推荐阅读