如何在React 15中创建一个空的默认值的受控输入

Question

我遇到了一个我想要控制的文本输入问题,但它需要支持一个空值.这是我的组件:

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 =''会使值下降,所以React认为这是一个不受控制的输入,即使它有一个onChange.

该组件有效,但我不喜欢在控制台中收到此警告:

警告:FormControl正在更改类型文本的受控输入以使其不受控制.输入元素不应从受控切换到不受控制(反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素.更多信息:http://facebook.github.io/react/docs/forms.html#controlled-components

这在0.14.x中运行良好,没有任何警告,但现在15似乎不喜欢它.如何清理它以保持功能但摆脱警告？

Answer 1

确保this.state.value在mount上未定义.您可以通过设置this.state = {value: props.value || ''};或创建props.value必需属性在构造函数中执行此操作.