您在没有 onChange 处理程序的情况下向表单字段提供了“值”道具

作者

目录

You provided ‘value’ prop to a form field without onChange handler

  1. 您在没有 onChange 处理程序的情况下向表单字段提供了“值”道具
  2. 您在没有 onChange 处理程序的情况下向表单字段提供了“checked”道具

如果您收到错误消息“您在没有 onChange 处理程序的情况下向表单字段提供了‘checked’属性”，请单击第二个副标题。

您在没有 onChange 处理程序的情况下向表单字段提供了 ‘value’ 属性


当我们在value没有处理程序的字段上设置 prop 时，会出现错误“您向没有
处理程序的表单字段提供了 prop”。onChangevalueonChange

要解决错误，请使用道具或在场地上defaultValue设置道具。onChange

您为表单字段提供了价值支持

下面是错误如何发生的示例。

应用程序.js
export default function App() {
  // ⛔️ You provided a `value` prop to a form field
  // without an `onChange` handler. This will render
  // a read-only field. If the field should be mutable
  // use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
  return (
    <div>
      <input type="text" id="message" value="Initial value" />
    </div>
  );
}

问题是我们在没有提供事件处理程序的情况下在字段value上设置了道具。这使得输入的值是静态的。inputonChange

使用defaultValueprop解决错误

解决错误的一种方法是改用defaultValueprop。

应用程序.js
export default function App() {
  return (
    <div>
      <input type="text" id="message" defaultValue="Initial value" />
    </div>
  );
}

defaultValue
属性为输入字段设置一个初始值
，但该值不是静态的，可以更改。

该defaultValue道具通常用于不受（由开发人员）控制的领域。这意味着您必须使用refor 作为表单中的元素来访问输入字段的值。
应用程序.js
import {useRef} from 'react';

// 👇️ Example of uncontrolled input field
export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.value);
  };

  return (
    <div>
      <input ref={ref} type="text" id="message" defaultValue="Initial value" />

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

每次单击按钮时，value输入字段的 将被记录到控制台。

在 上设置一个onChangepropinput来解决错误

或者，我们可以在字段onChange上设置一个道具input并处理事件。

应用程序.js
import {useState} from 'react';

export default function App() {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);

    // 👇️ this is the input field itself
    console.log(event.target);

    // 👇️ this is the new value of the input
    console.log(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        placeholder="Your message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
}

我们做的第一件事是将输入值存储在一个名为 的状态变量中
message。

我们onChange在输入字段上设置了 prop，所以每次输入的值改变时，handleChange都会调用该函数。

target我们可以通过对象的属性访问输入字段event。

同样，我们可以通过访问输入的值event.target.value。

为输入字段指定一个初始值

如果你想
为 input 提供一个初始值，你可以将它传递给useState()钩子。

应用程序.js
import {useState} from 'react';

export default function App() {
  // 👇️ set initial value in call to useState
  const [message, setMessage] = useState('Your initial value');

  const handleChange = event => {
    setMessage(event.target.value);

    console.log(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        placeholder="Your message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
}

我们传递给钩子的字符串useState将被设置为message变量的初始值。

您在没有 onChange 处理程序的情况下向表单字段提供了 ‘checked’ 属性


当我们在checked没有处理程序的复选框上设置 prop 时，会出现错误“您向没有
处理程序的表单字段提供了 prop”。onChangecheckedonChange

要解决错误，请使用道具或在场地上defaultChecked设置道具。onChange

你提供了 checked 道具来形成字段

下面是错误如何发生的示例。

应用程序.js
export default function App() {
  // ⛔️ Warning: You provided a `checked` prop to a form field
  // without an `onChange` handler. This will render a read-only field.
  // If the field should be mutable use `defaultChecked`.
  // Otherwise, set either `onChange` or `readOnly`.
  return (
    <div>
      <input type="checkbox" id="subscribe" name="subscribe" checked={true} />
    </div>
  );
}

问题是我们在没有提供事件处理程序的情况下在字段checked上设置了道具。这使得输入的道具静态。inputonChangechecked

使用defaultCheckedprop解决错误

解决错误的一种方法是
改用defaultCheckedprop。

应用程序.js
export default function App() {
  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />
    </div>
  );
}

该defaultChecked道具为复选框设置了一个初始值，但该值不是静态的，可以更改。

该defaultChecked道具通常用于不受控制（由开发人员）的复选框。这意味着您必须使用refor 作为表单中的元素来访问字段的值。
应用程序.js
import {useRef} from 'react';

// 👇️ Example of uncontrolled checkbox
export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.checked);
  };

  return (
    <div>
      <input
        ref={ref}
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

每次单击按钮时，checked复选框的值都会记录到控制台。

onChange在复选框上设置一个属性

或者，我们可以在字段onChange上设置一个道具input并处理事件。

应用程序.js
import {useState} from 'react';

export default function App() {
  const [isSubscribed, setIsSubscribed] = useState(false);

  const handleChange = event => {
    setIsSubscribed(event.target.checked);

    // 👇️ this is the checkbox itself
    console.log(event.target);

    // 👇️ this is the checked value of the field
    console.log(event.target.checked);
  };

  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        onChange={handleChange}
        checked={isSubscribed}
      />
    </div>
  );
}

我们做的第一件事是将checked输入值存储在一个名为 的状态变量中isSubscribed。

我们onChange在复选框上设置了 prop，因此每次更改其值时，handleChange都会调用该函数。

target我们可以通过对象上的属性访问复选框event。

同样，我们可以通过 访问它的值event.target.checked。

为复选框提供初始值

如果你想为复选框提供一个初始值，你可以将它传递给钩子useState()。

应用程序.js
import {useState} from 'react';

export default function App() {
  // 👇️ set checked to true initially
  const [isSubscribed, setIsSubscribed] = useState(true);

  const handleChange = event => {
    setIsSubscribed(event.target.checked);

    // 👇️ this is the checkbox itself
    console.log(event.target);

    // 👇️ this is the checked value of the field
    console.log(event.target.checked);
  };

  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        onChange={handleChange}
        checked={isSubscribed}
      />
    </div>
  );
}

我们传递true给了useState钩子，所以复选框的初始值为checked。

我还写了一篇关于
如何设置复选框的默认选中值的文章。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：