index.js

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

class ClearableInput extends Component {
  render() {
    let {
      value,
      name,
      wrapperClass,
      inputClass,
      type = "text",
      icon,
      setFieldValue,
      ...rest
    } = this.props
    let clearIconStyle = {
      display: value && value.length ? "block" : "none",
    }
    return (
      <div className={classnames("clearable-input-wrapper", wrapperClass)}>
        <input
          type={type}
          value={value}
          className={inputClass}
          {...rest}
          name={name}
        />
        {icon}
        <i
          className={"iconfont icondanseshixintubiao-3 clear"}
          onClick={() => {
            setFieldValue(name, "")
          }}
          style={clearIconStyle}
        />
      </div>
    )
  }
}

export default ClearableInput