TextField with floating label (no styles)

TextField_no_styles.js

const propTypes = {
  label: PropTypes.string,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

class TextField extends Component {
  state = {
    isFocused: false,
  }

  handleFocus = () => {
    this.setState({ isFocused: true });
  };

  handleBlur = () => {
    this.setState({ isFocused: false });
  };

  handleLabelClick = () => {
    const { isFocused } = this.state;
    const { value } = this.props;

    if (!isFocused && !value) {
      this.setState({ isFocused });
      this._input.focus();
    }
  };

  render() {
    const { label, value, ...rest } = this.props;
    const { isFocused } = this.state;

    return (
      <TextFieldWrapper>
        {label &&
          <Label
            up={isFocused || value}
            onClick={this.handleLabelClick}
          >
            {label}
          </Label>
        }

        <Input
          value={value}
          onChange={this.props.onChange}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          innerRef={node => { this._input = node; }}
          {...rest}
        />
      </TextFieldWrapper>
    );
  }
}