我想控制文本输入时遇到问题,但它需要支持一个空值。这是我的组件:
import React, { Component, PropTypes } from 'react'; import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'; const propTypes = { id: PropTypes.string.isRequired, label: PropTypes.string, onChange: PropTypes.func, upperCaseOnly: PropTypes.bool, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; export default class UppercaseTextField extends Component { constructor(props) { super(); this.state = { value: props.value }; this.onChange = () => this.onChange(); } onChange(e) { let value = e.target.value; if (this.props.upperCaseOnly) { value = value.toUpperCase(); } this.setState({ value }); this.props.onChange(e); } render() { return ( <FormGroup controlId={id}> <ControlLabel>{this.props.label}</ControlLabel> <FormControl type="text" onChange={this.onChange} defaultValue={this.props.value} value={this.state.value} /> </FormGroup> ); } } UppercaseTextField.propTypes = propTypes;
最初安装时,props.value通常(尽管并非总是)设置为’‘。这使React 15感到不满意,因为value =’‘会使值被丢弃,因此即使它具有onChange,它也认为它是不受控制的输入。
该组件有效,但是我不喜欢在控制台中收到此警告:
警告:FormControl正在将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态(反之亦然)。确定在组件的使用寿命期间使用受控或不受控制的输入元素。更多信息:http : //facebook.github.io/react/docs/forms.html#受控组件
在0.14.x中可以正常工作,没有任何警告,但是现在15似乎不喜欢它。我如何清理它以保留功能但摆脱警告?
确保this.state.value在安装时没有未定义。您可以在构造函数中通过设置this.state = {value: props.value || ''};或设置props.value必需的属性来执行此操作。
this.state.value
this.state = {value: props.value || ''};
props.value