javascript - ReactJS错误警告

Question

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

Warning: Failed form propType: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. Check the render method of Login.

有人可以告诉我如何修复它吗？

Answer 1

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

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

Warning: Failed form propType: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. Check the render method of Login.

受控组件

<小时/>

所需属性:

1. value -<input> (不是复选框或单选)，<select> , <textbox>或checked对于(复选框或单选)。
2. onChange

<小时/>

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

<input
  type="checkbox"
  defaultChecked={ this.props.checked } 
/>