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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想控制文本输入时遇到问题，但它需要支持一个空值。这是我的组件：

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必需的属性来执行此操作。

以上是 如何在React 15中创建默认值为空的受控输入 的全部内容， 来源链接： utcz.com/qa/401662.html

回到顶部