ReactJS错误警告

Question

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

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

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

Answer 1

React有两种使用表单控件的方法 - 受控组件和不受控制的组件

如果您不提供受控属性所需的元素或不受控制的组件所需的属性,则会收到此警告:

警告:表单propType失败:您在没有onChange处理程序的情况下向表单字段提供了检查过的prop.这将呈现一个只读字段.如果字段应该是可变的,请使用defaultChecked.否则,设置onChange或readOnly.检查Login的render方法.

受控组件

所需属性:

1. value- <input>(不是复选框或收音机)<select>,, <textbox>或checked(复选框或无线电).
2. onChange

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