Javascript ReactJS 错误警告

ReactJS error warning

提问by Randa

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 checkedprop to a form field without an onChangehandler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChangeor readOnly. Check the render method of Login.

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

Can someone tell me how I fix it please ?

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

采纳答案by t1m0n

You need to add defaultCheckedattribute to your checkbox:

您需要将defaultChecked属性添加到您的checkbox：

<div>
    <input type='checkbox' defaultChecked />
</div>

回答by Ori Drori

React has 2 ways of working with form controls - Controlled Componentsand Uncontrolled Components

React 有 2 种使用表单控件的方式——受控组件和非受控组件

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. 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.

警告：表单 propType 失败：您在没有 onChange 处理程序的情况下向表单字段提供了已检查的道具。这将呈现只读字段。如果该字段应该是可变的，请使用 defaultChecked。否则，设置 onChange 或 readOnly。检查登录的渲染方法。

Controlled Components

受控组件

---

---

Attributes needed:

需要的属性：

1. value- <input>(not checkbox or radio), <select>, <textbox>or checkedfor (checkbox or radio).
2. onChange

1. value- <input>（不是复选框或收音机）、<select>、<textbox>或checked（复选框或收音机）。
2. onChange

---

---

React handles the condition of the element by updating the valueor checkedattribute (depending on the element) from the propsor the state. 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. To do so, we must include an onChangehandler, in which we will update the stateor notify the component's parent, so it will update the props.

通过更新反应手柄元件的状态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>

Uncontrolled Components

不受控制的组件

---

---

Attributes needed:

需要的属性：

defaultValue- <input>(not checkbox or radio), <select>, <textbox>or defaultCheckedfor (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，元素状态的更新由用户控制，通常通过 DOM 使用 refs。

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

回答by Piotr Berebecki

The defaultCheckedmay 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>