解决React报错You provided a `checked` prop to a form field

目录
  • 总览
  • defaultChecked
  • onChange
  • 初始值

总览

当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form field without an onChange handler"错误。为了解决该错误,可以使用defaultChecked 属性,或者在表单字段上设置onChange 属性。

这里有个例子用来展示错误是如何发生的。

// App.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>
  );
}

上述代码片段的问题在于,我们在input表单上设置了checked属性,但却没有提供onChange事件处理器。这使得inputchecked属性成为静态的。

defaultChecked

解决该错误的一种方式是,使用defaultChecked属性取而代之。

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

defaultChecked属性为多选框设置了一个初始值,但是该值不是静态的,是可以被更改的。

defaultChecked 属性常被用于不受控(不被开发者控制)的多选框。这意味你必须使用ref或者表单元素来访问表单字段的值。

// App.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

或者,我们可以在input表单字段上设置onChange属性,并处理事件。

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>
  );
}

我们做的第一件事是将inputchecked值存储在一个叫做isSubscribed的状态变量中。

我们在多选框上设置了onChange属性,所以每当值改变时,handleChange函数就会被调用。

我们可以通过event对象上的target属性来访问多选框。类似地,我们可以通过event.target.checked来访问多选框的值。

初始值

如果你想为多选框提供一个初始值,只需将它传递给useState()钩子。

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>
  );
}

我们向useState钩子传递了true,所以复选框的初始值将是checked

翻译原文链接:bobbyhadz.com/blog/react-…

以上就是解决React报错You provided a `checked` prop to a form field的详细内容,更多关于React报错的资料请关注我们其它相关文章!

(0)

相关推荐

  • 解决React报错Invalid hook call

    目录 总览 版本匹配 调用组件 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function component"错误的有多种原因: react和react-dom的版本不匹配. 在一个项目中有多个react包版本. 试图将一个组件作为一个函数来调用,例如,App()而不是<App />. 在类里面使用钩子,或者在不是组件或自定义钩子的函数中使用钩子. 版本匹配 在项目的根目录

  • 解决React报错Property does not exist on type 'JSX.IntrinsicElements'

    目录 总览 组件大写 类型声明 总结 总览 当组件名称以小写字母开头时,会导致"Property does not exist on type 'JSX.IntrinsicElements'"错误.为了解决该错误,确保组件名称总是以大写字母开头,安装React声明文件并重启你的开发服务器. 这里有个示例用来展示错误是如何发生的. // App.tsx // ️ name starts with lowercase letter function myComponent() { retu

  • 解决React报错Parameter 'props' implicitly has an 'any' type

    目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s

  • 解决React报错Rendered more hooks than during the previous render

    目录 总览 顶层调用 条件之上 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render"错误.为了解决该错误,将所有的钩子移到函数组件的顶层,以及不要在条件中使用钩子. 这里有个示例用来展示错误是如何发生的. // App.js import {useEffect, useState} from 'react'; export default function App

  • 解决React报错Cannot find namespace context

    目录 总览 tsx 安装@types/包 手动添加 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx,并确保为你的应用程序安装所有必要的@types包. 这里有个例子来展示错误是如何发生的. // App.ts import React from 'react'; interface UserCtx { first: stri

  • 解决React报错Property 'value' does not exist on type EventTarget

    目录 总览 正确声明类型 找出类型 总结 总览 当event参数的类型不正确时,会产生"Property 'value' does not exist on type EventTarget"错误.为了解决该错误,将event的类型声明为React.ChangeEvent<HTMLInputElement> .然后就可以通过event.target.value 来访问其值. 这里有个示例用来展示错误是如何发生的. // App.tsx function App() { //

  • 解决React报错React Hook useEffect has a missing dependency

    目录 总览 禁用规则 依赖移入 依赖移出 useMemo useCallback 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing dependency"警告.为了解决该错误,禁用某一行的eslint规则,或者将变量移动到useEffect钩子内. 这里有个示例用来展示警告是如何发生的. // App.js import React, {useEffect, useState}

  • 解决React报错You provided a `checked` prop to a form field

    目录 总览 defaultChecked onChange 初始值 总览 当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form field without an onChange handler"错误.为了解决该错误,可以使用defaultChecked 属性,或者在表单字段上设置onChange 属性. 这里有个例子用来展示错误是如何发生的. // App.js export

  • 解决React报错useNavigate() may be used only in context of Router

    目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j

  • 解决React报错Style prop value must be an object

    目录 总览 映射 提取 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告,使用从属性到值的映射.比如说,style={{paddingLeft: '15px'}} . 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Style prop value must be an object eslint(reac

  • 解决React报错The tag is unrecognized in this browser

    目录 总览 确保标签存在 小写字母开头 总览 当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"The tag is unrecognized in this browser"React警告.为了解决该问题,只使用有效的标签名称,并将你的组件的第一个字母大写. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: The tag <p1> is unrecognized i

  • 解决React报错Cannot assign to 'current' because it is a read-only property

    目录 总览 正确的泛型 DOM元素 总览 当我们用一个null值初始化一个ref,但在其类型中不包括null时,就会发生"Cannot assign to 'current' because it is a read-only property"错误.为了解决该错误,请在ref的类型中包含null.比如说,const ref = useRef<string | null>(null) . 这里有个例子来展示错误是如何发生的. // App.tsx import {useEf

  • 解决React报错Functions are not valid as a React child

    目录 总览 调用函数 总结 总览 产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误 通常是因为以下两个原因: 从render中返回一个函数引用而不是一个组件. 使用 react router 路由作为<Route path="/about" el

  • 解决React报错Unexpected default export of anonymous function

    目录 总览 命名 注释单行规则 总结 总览 当我们尝试使用默认导出来导出一个匿名函数时,会导致"Unexpected default export of anonymous function"警告.为了解决该错误,在导出函数之前,为函数赋予一个名称. 这里有个例子来展示警告是如何发生的. // Header.js // ️ default export for anonymous function // ️ Unexpected default export of anonymous

  • 解决React报错Expected an assignment or function call and instead saw an expression

    目录 正文 显式返回 隐式返回 返回对象 正文 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', 'b', 'c'].map(el

随机推荐