Form 组件中使用 Input 封装的自定义组件，点击 Input 会失焦

[zhangminggeek]

NutUI React 包名

@nutui/nutui-react

NutUI React 版本号

2.6.8

平台

weapp

重现链接

https://codesandbox.io/p/sandbox/nutui-react-2x-demo-fg4vxd?file=/src/App.tsx

重现步骤

const InputCode = (props) => {
  return (
    <View>
      <Input {...props} />
      <Link>获取验证码</Link>
    </View>
  );
};

<Form labelPosition="left" >
      <Form.Item label="手机号" name="account">
        <Input />
      </Form.Item>
      <Form.Item label="验证码" name="code">
        <InputCode />
      </Form.Item>
    </Form>

手机号 Input 不会失焦，验证码 InputCode 点击后会立刻失焦，导致无法输入

期望的结果是什么？

Input 正常使用

实际的结果是什么？

封装后的Input组件无法输入

环境信息

No response

其他补充信息

No response

[zhangminggeek]

换成 Taro 的 Input 组件可正常使用

[whinc]

我也遇到了（nutui 版本 2.6.3），只要在 Form 中使用 nutui 提供的表单组件就会失焦（开发者工具中），而是用 Taro 原生的组件就不会，对比 wxml 发现 nutui 的表单组件渲染时，下面的 style 是 [Object object]，而 Taro 的表单组件就是正常的样式字符串，怀疑是这里的问题。

暂时改用 Taro 原生的组件解决了

        <Form.Item
          required
          label="基础攻击力"
          name="baseAttack"
          rules={[{ required: true, message: "请输入" }]}
          trigger="onInput"
          getValueFromEvent={(e) => e.detail.value}
        >
          <Input placeholder="请输入" type="digit" />
        </Form.Item>