index.js

import React, { Component } from "react"
import "./input.scss"

import classnames from "classnames"

class Input extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isFocus: false,
    }
  }

  clearInput = () => {
    this.props.onChange("")
  }

  render() {
    let { type, placeholder } = this.props
    const { isFocus } = this.state
    return (
      <div className="custom-input-wrapper">
        <input
          type={type}
          className={classnames("custom-input", {
            "custom-input--active": isFocus,
          })}
          placeholder={placeholder}
          onChange={this.props.onChange}
          value={this.props.value}
          onBlur={() => {
            this.setState({
              isFocus: false,
            })
          }}
          onFocus={() => {
            this.setState({
              isFocus: true,
            })
          }}
        />
        <i
          className={classnames("iconfont icondanseshixintubiao-3", {
            hide: this.props.value.length === 0,
          })}
          onClick={this.clearInput}
        />
      </div>
    )
  }
}

Input.defaultProps = { type: "text", placeholder: "" }

export default Input