日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

解決React報錯You?provided?a?`checked`?prop?to?a?form?field_React

作者：Borislav?Hadzhiev ? 更新時間： 2022-12-29 編程語言

總覽

當我們在多選框上設置了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事件處理器。這使得input的checked屬性成為靜態的。

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

我們做的第一件事是將input的checked值存儲在一個叫做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-…

原文鏈接：https://juejin.cn/post/7135818724287709192

欄目分類
最近更新