Antd 解决 Input.group的坑

before：当我们使用了Input.Group组件来作为表单的Item，from表单会无法识别这个Item

  			<Form.Item
            label="Secret Key"
            name="SecretKey"
            rules={[{required: true, message: 'Please input your password!'}]}
          >
            <Input.Group compact>
              <Input
                style={{width: 'calc(100% - 200px)'}}
              />
              <Tooltip title="copy Secret Key">
                <Button icon={<CopyOutlined/>}/>
              </Tooltip>
            </Input.Group>
          </Form.Item>

Now: 我们需要做的就是包装一下上面的代码，然后让包装后的组件提供value和onchange方法即可,也可以不提供(这算是antd的hack)

 <Form.Item
            label="Secret Key"
            name="SecretKey"
            rules={[{required: true, message: 'Please input your password!'}]}
          >
            <CustomInputGroup value={secretKey} onChange={(e: ChangeEvent<HTMLInputElement>) => {
              setSecretKey(e.target.value)
            }
            }/>
          </Form.Item>

const CustomInputGroup:FC<CustomInputGroupProps>=({ value, onChange })=>{
  return (
    <Input.Group compact>
      <Input
        style={{width: 'calc(100% - 200px)'}}
        value={value}
        onChange={onChange}
      />
      <Tooltip title="copy Secret ID">
        <Button icon={<CopyOutlined/>} onClick={() => {
          clipboard.writeText(value).then(()=>{
            console.log('ok')
          })
        }}/>
      </Tooltip>
    </Input.Group>
  );
}

export default CustomInputGroup