Question

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

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

有人可以告诉我如何解决它吗？

Answer 1

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

如果您既未提供受控属性所需的属性，也未提供非受控组件所需的属性，则会收到此警告：

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

受控组件

所需的属性：

value - <input>（不是复选框或广播），<select>，<textbox>或checked（复选框或广播）。
onChange

React通过更新value或checked中的props或state属性（取决于元素）来处理元素的条件。当我们进行更改时，我们需要通知反应，例如插入数据或检查框，因此当它重新呈现组件时，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)}
          />
    </>
  );
};

ReactJS错误警告

4 个答案:

受控组件

不受控制的组件