react给我一个警告:“组件正在更改要控制类型的非受控输入复选框。输入元素不应从非受控切换为受控(反之亦然)。”
但是我的复选框是通过state属性更改的。我缺少明显的东西吗?
import React from 'react'; // Components import Checkbox from './checkbox'; import HelpBubble from './helpBubble'; export default class CheckboxField extends React.Component { constructor(props) { super(props); this.state = {value: props.value}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } componentWillReceiveProps(nextProps) { if (nextProps.value !== this.props.value) { this.setState({value: nextProps.value}); } } render() { const {label, meta = {}, help, disabled, required, onChange} = this.props; return ( <label className="checkbox-wrap form-field"> <Checkbox disabled={disabled} type="checkbox" onChange={(event) => { onChange(event, !this.state.value); }} checked={this.state.value}/> {label && ( <div className="checkbox-label"> {label} {required && <div className="form-field__required"/>} </div> )} {help && <HelpBubble help={help}/>} {meta.error && meta.touched && ( <div className="input-error">{meta.error}</div> )} </label> ); }}
父组件:handleChangeParams(key,value)} />句柄更改参数更改模型中的值并调用服务器。根据服务器结果,该值可以更改。
提前致谢。
如果你的状态与初始化props.value是null反应会考虑你的Checkbox组件是不受控制的。
props.value
null
Checkbox
尝试设置您的初始状态,以使值永远不会null。
this.state = { value: props.value || "" };