index.js 963 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import React from 'react';
  2. import { Button, Input } from 'antd';
  3. import styles from './index.less';
  4. export default class SearchInput extends React.Component {
  5. state = {
  6. value: this.props.defaultValue,
  7. }
  8. handleOnChange = (e) => {
  9. this.setState({
  10. value: e.target.value,
  11. });
  12. }
  13. handleOnSearch = () => {
  14. if (this.props.onSearch) {
  15. this.props.onSearch(this.state.value);
  16. }
  17. }
  18. handleOnKey = (e) => {
  19. if (e.keyCode === 13) {
  20. this.handleOnSearch();
  21. }
  22. }
  23. render() {
  24. const { text = '搜索', reset } = this.props;
  25. return (
  26. <div className={styles.search}>
  27. <Input
  28. onKeyDown={this.handleOnKey}
  29. placeholder="请输入"
  30. size="large"
  31. {...reset}
  32. value={this.state.value}
  33. onChange={this.handleOnChange}
  34. addonAfter={<Button onClick={this.handleOnSearch} type="primary">{text}</Button>}
  35. />
  36. </div>
  37. );
  38. }
  39. }