Skip to content

使用Form.useWatch监听指定表单字段,同时通过form.setFieldValue设置表单其他字段值,会导致Form.useWatch执行,并且输出结果为undefined #3226

Open
@DuBian999

Description

@DuBian999

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.7.10

平台

weapp

重现链接

https://codesandbox.io/p/devbox/gracious-heisenberg-fdy25s?file=%2Fsrc%2FApp.tsx%3A28%2C1

重现步骤

将下段代码编至weapp,先在account表单字段输入值,观察account打印结果,然后去外部cell包裹的input组件中输入值,再观察account打印结果

import { Form, Input, Cell } from '@nutui/nutui-react-taro';

const Demo8 = () => {
  const [form] = Form.useForm();
  const account = Form.useWatch('account', form);

  console.error(account, '=accountaccount');

  return (
    <>
      <Form
        form={form}
        initialValues={{ loginMethod: 'mobile', account: '123' }}
      >
        <Form.Item
          name='account'
          label='手机号'
        >
          <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
          name='email'
          label='电子邮箱'
        >
          <Input placeholder='请输入邮箱' />
        </Form.Item>
      </Form>

      <Cell
        title='外部设置email'
        extra={
          <Input
            onChange={(v) => {
              form.setFieldValue('email', v);
            }}
          />
        }
      />
    </>
  );
};

export default Demo8;

期望的结果是什么?

cell包裹的input组件中输入值,不会触发account 的监听

实际的结果是什么?

cell包裹的input组件中输入值时,触发account 的监听,并且打印的值为undefined,与实际填写的值不一致

Image

环境信息

No response

其他补充信息

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions