index.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Image, Input } from '@tarojs/components'
  3. import iconClose from './assets/clear.png'
  4. import './index.scss'
  5. export default class InputItem extends Component {
  6. static defaultProps = {
  7. type: 'text',
  8. value: '',
  9. placeholder: '',
  10. focus: false,
  11. password: false,
  12. compStyle: '',
  13. inputStyle: '',
  14. onInput: () => {},
  15. onFocus: () => {},
  16. onBlur: () => {}
  17. }
  18. handleInput = (e) => {
  19. this.props.onInput(e.detail.value)
  20. }
  21. handleClear = () => {
  22. this.props.onInput('')
  23. }
  24. render () {
  25. const {
  26. type, value, placeholder, focus, password,
  27. compStyle, inputStyle,
  28. onFocus, onBlur
  29. } = this.props
  30. return (
  31. <View className='comp-input-item' style={compStyle}>
  32. <Input
  33. className='comp-input-item__input'
  34. style={inputStyle}
  35. type={type}
  36. value={value}
  37. focus={focus}
  38. password={password}
  39. placeholder={placeholder}
  40. placeholderClass='comp-input-item__input--placeholder'
  41. onInput={this.handleInput}
  42. onFocus={onFocus}
  43. onBlur={onBlur}
  44. />
  45. {!!value &&
  46. <View className='comp-input-item__clear' onClick={this.handleClear}>
  47. <Image className='comp-input-item__clear-img' src={iconClose} />
  48. </View>
  49. }
  50. </View>
  51. )
  52. }
  53. }