Ant Design表单如何同时传递元素ID与表单值？

方法一：通过包装函数传递item.id #

直接在onFinish中用箭头函数包装，将item.id作为额外参数传给updateRecord，同时接收表单提交的values。

修改后的Popup内表单代码： #

<td>
  <Popup trigger={<Button>Edit</Button>} model nested>
    {close => (
      <div className='modal'>
        <Form 
          form={form} 
          onFinish={(values) => updateRecord(values, item.id)} 
          name="control-hooks" 
          layout="vertical"
          initialValues={{ email: item.email }} // 初始化表单为当前项的邮箱值
        >
          <Form.Item
            name="email"
            label="Email"
          >
            Current value: {item.email}
            <Input placeholder='Please enter Whitelist Email'/>
          </Form.Item>

          <Button
            type='primary'
            htmlType="submit"
            style={{margin:'0 0 0 8px'}}
            onClick={() => close()} // 提交后关闭弹窗，可选
          >
            Submit
          </Button>
        </Form>
      </div>
    )}
  </Popup>
</td>

修改后的updateRecord函数： #

const updateRecord = async (values, itemId) => {
  try {
    setLoading(true);
    const result = await axios.post(window.adminAjaxUrl, qs.stringify({
      id: itemId,
      ...values,
      action: 'sv_whiteListEmail_update',
      _nonce: window.ajaxNonce,
    }));
    
    console.log(result);
    setLoading(false);
    // 根据返回状态处理提示
    switch (result['status']) {
      case 200:
        message.success(result['message']);
        break;
      case 500:
        message.error(result['message']);
        break;
      case 900:
        message.warning(result['message']);
        break;
      default:
        return ;
    }
  } catch (e) {
    setLoading(false);
    handleFormError(form, e.response.data);
  }
}

方法二：使用隐藏表单字段存储item.id #

在表单中添加隐藏的Form.Item，将item.id作为初始值存入，这样onFinish返回的values会自动包含id字段，无需额外传参。

修改后的Popup内表单代码： #

<td>
  <Popup trigger={<Button>Edit</Button>} model nested>
    {close => (
      <div className='modal'>
        <Form 
          form={form} 
          onFinish={updateRecord} 
          name="control-hooks" 
          layout="vertical"
          initialValues={{ 
            email: item.email,
            id: item.id // 把item.id存入隐藏字段
          }}
        >
          {/* 隐藏字段存储item.id */}
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>

          <Form.Item
            name="email"
            label="Email"
          >
            Current value: {item.email}
            <Input placeholder='Please enter Whitelist Email'/>
          </Form.Item>

          <Button
            type='primary'
            htmlType="submit"
            style={{margin:'0 0 0 8px'}}
            onClick={() => close()}
          >
            Submit
          </Button>
        </Form>
      </div>
    )}
  </Popup>
</td>

修改后的updateRecord函数： #

const updateRecord = async (values) => {
  try {
    setLoading(true);
    const result = await axios.post(window.adminAjaxUrl, qs.stringify({
      ...values, // values已包含id和邮箱字段
      action: 'sv_whiteListEmail_update',
      _nonce: window.ajaxNonce,
    }));
    
    console.log(result);
    setLoading(false);
    // 状态提示处理
    switch (result['status']) {
      case 200:
        message.success(result['message']);
        break;
      case 500:
        message.error(result['message']);
        break;
      case 900:
        message.warning(result['message']);
        break;
      default:
        return ;
    }
  } catch (e) {
    setLoading(false);
    handleFormError(form, e.response.data);
  }
}

注意事项 #

• 两种方法都要初始化表单为当前项的邮箱值，避免用户编辑时看不到原有内容。
• 如果复用同一个form实例处理多个弹窗，建议在弹窗关闭时调用form.resetFields()，防止旧数据残留。

内容的提问来源于stack exchange，提问作者Rickyforcode