[英]ReactJS error warning
I'm creating my first application with ReactJS and I found this warning when I run my code:我正在使用 ReactJS 创建我的第一个应用程序,当我运行我的代码时发现了这个警告:
Warning: Failed form propType: You provided a
checked
prop to a form field without anonChange
handler.警告:表单 propType 失败:您在没有
onChange
处理程序的情况下向表单字段提供了checked
的 prop。 This will render a read-only field.这将呈现一个只读字段。 If the field should be mutable use
defaultChecked
.如果该字段应该是可变的,请使用
defaultChecked
。 Otherwise, set eitheronChange
orreadOnly
.否则,设置
onChange
或readOnly
。 Check the render method ofLogin
.检查
Login
的渲染方法。
Can someone tell me how I fix it please?有人可以告诉我如何解决吗?
React has 2 ways of working with form controls - Controlled Components and Uncontrolled Components React有两种使用表单控件的方法 - 受控组件和不受控制的组件
You get this warning when you don't supply the element neither the attributes needed for controlled nor those needed for an uncontrolled component: 如果您不提供受控属性所需的元素或不受控制的组件所需的属性,则会收到此警告:
Warning: Failed form propType: You provided a checked prop to a form field without an onChange handler.
警告:表单propType失败:您在没有onChange处理程序的情况下向表单字段提供了检查过的prop。 This will render a read-only field.
这将呈现一个只读字段。 If the field should be mutable use defaultChecked.
如果字段应该是可变的,请使用defaultChecked。 Otherwise, set either onChange or readOnly.
否则,设置onChange或readOnly。 Check the render method of Login.
检查Login的render方法。
Attributes needed: 所需属性:
value
- <input>
(not checkbox or radio), <select>
, <textbox>
or checked
for (checkbox or radio). value
- <input>
(不是复选框或无线电), <select>
, <textbox>
或checked
(复选框或无线电)。 onChange
React handles the condition of the element by updating the value
or checked
attribute (depending on the element) from the props
or the state
. React通过更新
props
或state
的value
或checked
属性(取决于元素)来处理元素的条件。 We need to notify react when we make a change, like inserting data, or checking the box, so react can update the element's condition when it rerenders the component. 当我们进行更改时,我们需要通知反应,例如插入数据或检查框,因此当它重新呈现组件时,react可以更新元素的条件。 To do so, we must include an
onChange
handler, in which we will update the state
or notify the component's parent, so it will update the props
. 为此,我们必须包含一个
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>
Attributes needed: 所需属性:
defaultValue
- <input>
(not checkbox or radio), <select>
, <textbox>
or defaultChecked
for (checkbox or radio). defaultValue
- <input>
(不是复选框或广播), <select>
, <textbox>
或defaultChecked
(复选框或无线电)。
React sets the initial value using defaultValue or defaultChecked
, and the update of the element's state is controlled by the user, usually via the DOM using refs. React使用
defaultValue or defaultChecked
设置初始值,并且元素状态的更新由用户控制,通常使用refs通过DOM控制。
<input
type="checkbox"
defaultChecked={ this.props.checked }
/>
The defaultChecked
may not be updated if the component is re-rendered in future so use this approach with caution. 如果将来重新呈现组件,则可能不会更新
defaultChecked
,因此请谨慎使用此方法。
You may be better off just using a blank function to remove the warning. 您可能最好只使用空白功能删除警告。 Especially if you want to handle click on the whole div which includes the checkbox and the associated text.
特别是如果你想处理点击包括复选框和相关文本的整个div。
<div onClick={this.handleClick}>
<input type="checkbox" checked={this.props.checked} onChange={()=>{}}/>
{this.props.text}
</div>
You need to add defaultChecked
attribute to your checkbox
: 您需要将
defaultChecked
属性添加到您的checkbox
:
<div>
<input type='checkbox' defaultChecked />
</div>
For those that prefer a Functional Component instead of a Class Component this Controlled Component
approach is simple and easy to implement.对于那些更喜欢功能组件而不是类组件的人来说,这种
Controlled Component
方法简单且易于实现。 If you don't know what a Controlled Component
is then please refer to @Ori Drori's well explained answer in this thread.如果您不知道什么是
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)}
/>
</>
);
};
If your confronting with this warning, You can add "readOnly" to your input.如果您遇到此警告,您可以在输入中添加“只读”。 like this code:
像这样的代码:
<div>
<input type='checkbox' checked={ props.checkBoxChecked } readOnly />
</div>
Or You can add an onChange event like an empty arrow function or what kind of function you care about to your input.或者您可以添加一个 onChange 事件,如空箭头 function 或您关心的 function 类型的输入。 like this:
像这样:
<div>
<input type='checkbox' checked={ props.checkBoxChecked } onChange={() => {}} />
</div>
Also you must care about the value property, too.此外,您还必须关心 value 属性。 This solution fixed my issue with the same warning, hope to be useful.
这个解决方案用同样的警告解决了我的问题,希望有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.