react和antmobile下，怎么使用GestureDetector包裹input组件

在 React 和 ant-mobile 中使用 `GestureDetector` 包裹 `input` 组件可以增加手势识别的功能。具体步骤如下：

1. 首先需要安装 `rc-gesture` 包，可以通过 npm 或 yarn 进行安装：

   npm install rc-gesture --save
   或
   yarn add rc-gesture

2. 导入 `Gesture` 组件和 `InputItem` 组件：

   import { Gesture, InputItem } from 'antd-mobile';

3. 在 `Gesture` 组件中包裹 `InputItem` 组件，并设置 `onPan` 属性来监听手势事件：

   <Gesture onPan={handleGesture}>
     <InputItem placeholder="请输入内容" />
   </Gesture>

4. 编写 `handleGesture` 函数来处理手势事件，可以根据手势事件的类型进行不同的操作，例如清空输入框或者提交表单等：

   const handleGesture = (evt) => {
     switch (evt.type) {
       case 'pan':
         console.log('pan', evt.deltaX, evt.deltaY);
         break;
       case 'panend':
         console.log('panend', evt.deltaX, evt.deltaY);
         break;
       default:
         break;
     }
   };

上面的例子中，当手势类型为 `pan` 时，会输出手势在 X 轴和 Y 轴上的偏移量，当手势类型为 `panend` 时，会输出手势结束时在 X 轴和 Y 轴上的偏移量。

完整的示例代码如下：

import React, { useState } from 'react';
import { Gesture, InputItem, Button } from 'antd-mobile';

const GestureDemo = () => {
  const [value, setValue] = useState('');

  const handleGesture = (evt) => {
    switch (evt.type) {
      case 'pan':
        console.log('pan', evt.deltaX, evt.deltaY);
        break;
      case 'panend':
        console.log('panend', evt.deltaX, evt.deltaY);
        break;
      default:
        break;
    }
  };

  const handleClear = () => {
    setValue('');
  };

  const handleSubmit = () => {
    console.log('submit', value);
  };

  return (
    <div>
      <Gesture onPan={handleGesture}>
        <InputItem value={value} placeholder="请输入内容" onChange={setValue} />
      </Gesture>
      <div style={{ marginTop: 10 }}>
        <Button type="ghost" size="small" onClick={handleClear}>
          清空
        </Button>
        <Button type="primary" size="small" onClick={handleSubmit} style={{ marginLeft: 10 }}>
          提交
        </Button>
      </div>
    </div>
  );
};

export default GestureDemo;