React報錯 You provided a `value` prop to a form fiel

ivydom 發布于2019-08-23 14:57 / 3009人閱讀

摘要：報錯內容原因原因是因為標簽，沒有定義但是提供了屬性。會拋出警告，并將元素設置為只讀。如果目標是只讀字段，最好使用屬性明確加以定義。這不僅會消除警告，也會確保代碼的可讀性。解決可以添加，或者直接添加屬性，而不設置值，會默認將該屬性的值設為。

報錯內容

Failed prop type: 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`.

原因

原因是因為input標簽，沒有定義onChange 但是提供了value屬性。React會拋出警告，并將元素設置為只讀。

如果目標是只讀字段，最好使用readOnly屬性明確加以定義。這不僅會消除警告，也會確保代碼的可讀性。

解決：

可以添加readOnly={true} ，或者直接添加readOnly屬性，而不設置值，React會默認將該屬性的值設為true。

云服務器 GPU云服務器 attribute!value 阿里云to asp for to prop()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101405.html

React系列 --- createElement, ReactElement與Component部

摘要：僅針對數據屬性描述有效獲取該屬性的訪問器函數。當且僅當指定對象的屬性可以被枚舉出時，為。凍結及其對象主要目的是為提高測試環境下效率，將的一些屬性配置為不可枚舉，進行遍歷的時候跳過這些屬性。 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)React系列 --- virtualdom diff算法實現分析(三)React...

xuhong 2019-08-26 10:37 評論0 收藏0
React官網的RECENT POSTS閱讀

摘要：事件行為在瀏覽器中保持一次，并且符合標準。主要是進行修復。事件已經在移動上支持。阻止已經在上存在的事件錯誤處理。然后對應的將會被打包送往客戶端。在中棄用，現在正式刪除。是運行于一個嚴格的安全策略下成為可能。增加警告提示非生產環境。 ??寫在開頭閱讀React官網的 RECENT POSTS的個人翻譯/摘要(部分)。英文片段為官網原文片段。原文地址 ??為什么要使用React ...

Sike 2019-08-21 15:33 評論0 收藏0
React

摘要：語法是一種語法的拓展語言，在中官方也推薦使用描述用戶界面，使用起來會比較快捷而且易讀不是一門新的語言，可以理解為是一種語法糖，作用就是能夠讓我們更加直觀的在中創建標簽，最終還是會被編譯為語法，例如我們看一段代碼上面的語法最終會被編譯為語法， Reatc JSX語法 jsx是一種JavaScript語法的拓展語言，在React中官方也推薦使用jsx描述用戶界面，使用起來會比較快捷而且易讀...

techstay 2019-08-23 11:40 評論0 收藏0
React手稿之類型檢查

摘要：類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用或者來實現。示例以上內容在實現一個通用組件時非常有用。類型檢查和參數默認值一起使用，保證組件的正常運行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數正確性。通常在項目中可以使用Flow或者TypeScript來實現。 React提供了PropTypes來檢查類型。示例： imp...

tomorrowwu 2019-08-26 12:24 評論0 收藏0
React源碼解析之React.createContext()

摘要：我們只希望最多有兩個并發渲染器主要和次要主要和次要。輔助渲染器將自己的的存儲在單獨的字段中。 showImg(https://segmentfault.com/img/remote/1460000019911593); 前言：由于childContext在React17中會被廢棄，所以不去分析它了，主要是新 API— —createContext()的講解一、React.create...

booster 2019-08-26 10:26 評論0 收藏0