Reactjs 如何在React 15中创建默认为空的受控输入

我想控制的文本输入有问题，但它需要支持空值。以下是我的组件：

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;

import React，{Component，PropTypes}来自'React'；
从“react bootstrap”导入{ControlLabel，FormControl，FormGroup}；
常量属性类型={
id:PropTypes.string.isRequired，
标签：PropTypes.string，
onChange:PropTypes.func，
仅大写：PropTypes.bool，
值：PropTypes.oneOfType（[PropTypes.string，PropTypes.number]），
};
导出默认类UppercaseTextField扩展组件{
建造师（道具）{
超级（）；
this.state={value:props.value}；
this.onChange=（）=>this.onChange（）；
}
onChange（e）{
设值=e.target.value；
如果（仅限本道具大写字母）{
value=value.toUpperCase（）；
}
this.setState（{value}）；
此.props.onChange（e）；
}
render（）{
返回(
{this.props.label}
);
}
}
UppercaseTextField.propTypes=propTypes；

初始装入时，props.value通常（尽管不总是）设置为“”。这使React 15不高兴，因为value=''使该值被删除，所以React认为它是一个不受控制的输入，即使它有onChange

该组件可以工作，但我不喜欢在控制台中收到以下警告：

警告：FormControl正在将文本类型的受控输入更改为 不受控制。输入元素不应从受控切换到 不受控制（反之亦然）。决定是使用受控的还是 部件寿命期内的非受控输入元件。更多 信息：

---

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

确保

此.state.value

在装载时未定义。您可以在构造函数中通过设置

this.state={value:props.value | |''''}或将
props.value
设置为必需属性。
不幸的是，这不起作用。如果我将其设置为必需的prop，则会收到一条警告，指出它已丢失，因为React会忽略空字符串和null props值以进行require验证。我尝试了你的其他建议（
this.state={value:props.value | |'''}
），但是空字符串使得
FormControl
没有接收到值prop（因为React丢弃了它），所以我得到了相同的警告。因为
FormControl
是react引导的一部分，所以我不想改变它。因为这是该版本的一个新警告，所以对于React 15还有其他想法吗？我不确定我是否遵循。React不会忽略空字符串道具。这是一把小提琴：我看到它在你的小提琴上起作用。可能是0.29.3版的React bootstrap吗？不是。下面是与0.29.3-相同的示例。我在原始示例中看到的另一个问题是，您同时设置了
defaultValue
和
value
。您不应该这样做-仅设置
值就足够了。您是对的，我不应该同时使用
defaultValue
和
value
。当我删除
defaultValue
时，警告消失了，这就是原因。谢谢