解決React報(bào)錯(cuò)You provided a `checked` prop to a form field

更新時(shí)間：2022年12月02日 09:44:00 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們?cè)诙噙x框上設(shè)置了checked 屬性，卻沒有onChange 處理函數(shù)時(shí)，會(huì)產(chǎn)生"You provided a checked prop to a form field without an onChange handler"錯(cuò)誤。為了解決該錯(cuò)誤，可以使用defaultChecked 屬性，或者在表單字段上設(shè)置onChange 屬性。

這里有個(gè)例子用來展示錯(cuò)誤是如何發(fā)生的。

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

上述代碼片段的問題在于，我們?cè)?code>input表單上設(shè)置了checked屬性，但卻沒有提供onChange事件處理器。這使得input的checked屬性成為靜態(tài)的。

defaultChecked

解決該錯(cuò)誤的一種方式是，使用defaultChecked屬性取而代之。

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

defaultChecked屬性為多選框設(shè)置了一個(gè)初始值，但是該值不是靜態(tài)的，是可以被更改的。

defaultChecked 屬性常被用于不受控（不被開發(fā)者控制）的多選框。這意味你必須使用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>
  );
}

每當(dāng)你點(diǎn)擊按鈕時(shí)，多選框的checked值就會(huì)被打印到控制臺(tái)上。

onChange

或者，我們可以在input表單字段上設(shè)置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>
  );
}

我們做的第一件事是將input的checked值存儲(chǔ)在一個(gè)叫做isSubscribed的狀態(tài)變量中。

我們?cè)诙噙x框上設(shè)置了onChange屬性，所以每當(dāng)值改變時(shí)，handleChange函數(shù)就會(huì)被調(diào)用。

我們可以通過event對(duì)象上的target屬性來訪問多選框。類似地，我們可以通過event.target.checked來訪問多選框的值。

初始值

如果你想為多選框提供一個(gè)初始值，只需將它傳遞給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，所以復(fù)選框的初始值將是checked。

翻譯原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報(bào)錯(cuò)You provided a `checked` prop to a form field的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: