ReactJS 错误警告

Question

我正在使用 ReactJS 创建我的第一个应用程序，当我运行我的代码时发现了这个警告：

警告：表单 propType 失败：您向表单提供了 checked 道具 没有onChange 处理程序的字段。这将呈现只读 场地。如果该字段应该是可变的，请使用defaultChecked。除此以外， 设置onChange 或readOnly。检查渲染方法 Login.

谁能告诉我如何解决它？

Answer 1

React 有两种使用表单控件的方式 - Controlled Components 和 Uncontrolled Components

当您既不提供受控组件所需的属性也不提供不受控组件所需的属性时，您会收到此警告：

警告：表单 propType 失败：您向表单提供了选中的 prop 没有 onChange 处理程序的字段。这将呈现一个只读字段。 如果该字段应该是可变的，请使用 defaultChecked。否则，设置 onChange 或只读。检查Login的渲染方法。

受控组件

---

需要的属性：

1. value - <input>（不是复选框或单选），<select>、<textbox> 或 checked 用于（复选框或单选）。
2. onChange

---

React 通过从props 或state 更新value 或checked 属性（取决于元素）来处理元素的条件。当我们进行更改时，我们需要通知 react，比如插入数据，或者选中复选框，因此 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 设置初始值，元素状态的更新由用户控制，通常通过 DOM 使用 refs。

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