Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a controlled input with empty default in React 15

I'm having a problem with a text input that I want to be controlled, but it needs to support an empty value. Here is my component:

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;

When this is initially mounted, props.value is commonly (though not always) set to ''. This makes React 15 unhappy, as value='' makes the value get dropped, so React thinks it's an uncontrolled input, even though it has an onChange.

The component works, but I don't like getting this warning in the console:

Warning: FormControl is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: http://facebook.github.io/react/docs/forms.html#controlled-components

This worked fine in 0.14.x without any warnings, but now 15 seems to not like it. How do I clean it up to keep the functionality but get rid of the warning?

like image 434
Kelly Keller-Heikkila Avatar asked May 11 '16 23:05

Kelly Keller-Heikkila


People also ask

How do you make an input empty React?

To clear an input field with React, we can set the value of the value attribute to an empty string. We create the val state with the useState hook. Then we set the value prop of the input to the val state. Next we set the onClick prop of the button to a function that calls setVal to an empty string.

How do I set default value in form input in React?

To set a default value for an input element in React:Pass the default value as a parameter to the useState hook for controlled fields. Set the defaultValue prop on uncontrolled input fields.

How do I clear default value in React?

The solution is to use the reset() function from the React Hook Form library, if you execute the function without any parameters ( reset() ) the form is reset to its default values, if you pass an object to the function it will set the form with the values from the object (e.g. reset({ firstName: 'Bob' }) ).

How do you set a default value for an uncontrolled field?

We can set a default value for an uncontrolled form field by using the defaultValue property.


1 Answers

ensure this.state.value is not undefined on mount. You could do this in your constructor by setting this.state = {value: props.value || ''}; or by making props.value a required property.

like image 131
gurch101 Avatar answered Sep 28 '22 05:09

gurch101