ReactJS 錯誤警告

Question

我正在使用 ReactJS 創建我的第一個應用程序，當我運行我的代碼時發現了這個警告：

警告：表單 propType 失敗：您在沒有onChange處理程序的情況下向表單字段提供了checked的 prop。 這將呈現一個只讀字段。 如果該字段應該是可變的，請使用defaultChecked 。 否則，設置onChange或readOnly 。 檢查Login的渲染方法。

有人可以告訴我如何解決嗎？

Answer 1

React有兩種使用表單控件的方法 - 受控組件和不受控制的組件

如果您不提供受控屬性所需的元素或不受控制的組件所需的屬性，則會收到此警告：

警告：表單propType失敗：您在沒有onChange處理程序的情況下向表單字段提供了檢查過的prop。 這將呈現一個只讀字段。 如果字段應該是可變的，請使用defaultChecked。 否則，設置onChange或readOnly。 檢查Login的render方法。

受控組件

---

所需屬性：

1. value - <input> （不是復選框或無線電）， <select> ， <textbox>或checked （復選框或無線電）。
2. onChange

---

React通過更新props或state的value或checked屬性（取決於元素）來處理元素的條件。 當我們進行更改時，我們需要通知反應，例如插入數據或檢查框，因此當它重新呈現組件時，react可以更新元素的條件。 為此，我們必須包含一個onChange處理程序，我們將在其中更新state或通知組件的父級，因此它將更新props 。

<input
  type="checkbox"
  checked={ this.props.checked }
  onChange={ this.checkboxHandler } 
/>

 const { render } = ReactDOM; class Demo extends React.Component { constructor(props) { super(props); this.state = { checked: true }; this.checkboxHandler = this.checkboxHandler.bind(this); } checkboxHandler(e) { this.setState({ checked: e.target.checked }); } render() { return ( <input type="checkbox" checked={ this.state.checked } onChange={ this.checkboxHandler } /> ); } } render( <Demo />, document.getElementById('demo') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script> <h1>The Checkbox</h1> <div id="demo"></div> 

不受控制的組件

---

所需屬性：

defaultValue - <input> （不是復選框或廣播）， <select> ， <textbox>或defaultChecked （復選框或無線電）。

---

React使用defaultValue or defaultChecked設置初始值，並且元素狀態的更新由用戶控制，通常使用refs通過DOM控制。

<input
  type="checkbox"
  defaultChecked={ this.props.checked } 
/>

Answer 2

如果將來重新呈現組件，則可能不會更新defaultChecked ，因此請謹慎使用此方法。

您可能最好只使用空白功能刪除警告。 特別是如果你想處理點擊包括復選框和相關文本的整個div。

<div onClick={this.handleClick}>
  <input type="checkbox" checked={this.props.checked} onChange={()=>{}}/>
  {this.props.text}
</div>

Answer 3

您需要將defaultChecked屬性添加到您的checkbox ：

<div>
    <input type='checkbox' defaultChecked />
</div>

Answer 4

對於那些更喜歡功能組件而不是類組件的人來說，這種Controlled Component方法簡單且易於實現。 如果您不知道什么是Controlled Component ，請參閱此線程中@Ori Drori 的詳細解釋。

import {useState} from "react";

export default function YourComponentName(){

  const [checked, setChecked] = useState(true);

  return (
    <>
          <input
            type="checkbox"
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
    </>
  );
};

Answer 5

如果您遇到此警告，您可以在輸入中添加“只讀”。 像這樣的代碼：

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } readOnly />
</div>

或者您可以添加一個 onChange 事件，如空箭頭 function 或您關心的 function 類型的輸入。 像這樣：

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } onChange={() => {}} />
</div>

此外，您還必須關心 value 屬性。 這個解決方案用同樣的警告解決了我的問題，希望有用。