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 属性。 这个解决方案用同样的警告解决了我的问题，希望有用。