Question

我正在尝试使用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>
        </>
    )
}

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

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

Answer 1

您必须使用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

希望这对您有帮助！

DOM不会随着价值变化而更新

1 个答案: