<input> 标签上的属性 `reset` 值无效

Question

我收到这个警告：

react-dom.development.js:86 警告：reset标签上的 prop 值无效。要么将其从元素中删除，要么传递一个字符串或数字值以将其保留在 DOM 中。详情请参见https://reactjs.org/link/attribute-behavior

这来自我的自定义挂钩：

import { useState } from 'react'

export const useField = (type) => {
  const [value, setValue] = useState('')

  const onChange = (event) => {
    setValue(event.target.value)
  }

  const reset = () => {
    setValue('')
  }

  return {
    type,
    value,
    onChange,
    reset
  }
}

该钩子在组件中使用：

const CreateNew = (props) => {
  const content = useField('text')
  const author = useField('text')
  const info = useField('text')

  const navigate = useNavigate()

  const handleSubmit = (e) => {
    e.preventDefault()

    props.addNew({
      content: content.value,
      author: author.value,
      info: info.value,
      votes: 0
    })
    navigate('/')
    props.setNotification(`a new anecdote ${content.value} created!`)
    setTimeout(() => {
      props.setNotification(null)
    }, 5000)
  }

  const handleReset = (event) => {
    console.log(content)
    content.onReset()
    author.onReset()
    info.onReset()
  }

  return (
    <div>
      <h2>create a new anecdote</h2>
      <form onSubmit={handleSubmit}>
        <div>
          content
          <input {...content} />
        </div>
        <div>
          author
          <input {...author} />
        </div>
        <div>
          url for more info
          <input {...info} />
        </div>
        <button type="submit">create</button>
        <button type="button" onClick={handleReset}>reset</button>
      </form>
    </div>
  )
}

当我将函数名称更改reset为时，警告消失了onReset，但我不明白为什么。

是onResetreact的特殊关键字还是什么？我纯粹是运气改变了它，问题就消失了，但我不明白为什么。

Answer 1

问题

您将reset属性/属性传递给input无效属性值的元素，它是一个函数，而不是字符串或数字。

const useField = (type) => {
  const [value, setValue] = useState("");

  const onChange = (event) => {
    setValue(event.target.value);
  };
  const reset = () => {
    setValue("");
  };

  return {
    type,
    value, // <-- is a function
    onChange,
    reset
  };
};

...

const content = useField('text'); // <-- includes reset function

...

<input {...content} /> // <-- reset spread to input, causes error

请参阅输入标签以获取有效属性的列表。

React 不标记名称的原因onReset是因为这是一个有效的事件处理程序（但对于form元素而言不是input），请参阅综合事件。

你的问题

onReset是react的特殊关键字还是什么？我纯粹是运气改变了它，问题就消失了，但我不明白为什么。

如果您点击警告中的链接，则该注释将隐藏在页面中。

注意：以 on 开头的属性不会作为异常传递，因为这可能会成为潜在的安全漏洞。

此外，回调中存在一个问题handleReset，即引用未定义的属性并尝试调用它们，当前面的问题得到解决时，这显然会引发错误。

const handleReset = (event) => {
  console.log(content);
  content.onReset(); // <-- onReset is undefined, should call content.reset()
  author.onReset();
  info.onReset();
};

解决方案

reset从钩子的返回值解构函数useField并将其余部分传播到 props 对象中。参考正确的复位函数handleReset。

例子：

const CreateNew = (props) => {
  const { reset: resetContent, ...content } = useField("text");
  const { reset: resetAuthor, ...author } = useField("text");
  const { reset: resetInfo, ...info } = useField("text");

  ...

  const handleReset = (event) => {
    console.log(content);
    resetContent();
    resetAuthor();
    resetInfo();
  };

  return (
    <div>
      <h2>create a new anecdote</h2>
      <form onSubmit={handleSubmit}>
        <div>
          content
          <input {...content} />
        </div>
        <div>
          author
          <input {...author} />
        </div>
        <div>
          url for more info
          <input {...info} />
        </div>
        <button type="submit">create</button>
        <button type="button" onClick={handleReset}>
          reset
        </button>
      </form>
    </div>
  );
};