Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SearchSelect<搜索选择器>]: 在表单使用时,样式出现问题 #793

Closed
hy916 opened this issue Apr 24, 2022 · 1 comment
Closed

Comments

@hy916
Copy link
Contributor

hy916 commented Apr 24, 2022

注意:根据下面内容复现错误问题,以方便测试。

描述错误

我在表单使用时,给予必填参数后,直接点击提交,提示的样式就出现问题了

错误复现

重现行为的步骤:

  1. 表单中添加必填参数
  2. 点击“提交按钮“
  3. 查看样式问题

示例代码

import ReactDOM from 'react-dom';
import React from 'react';
import { ProForm,useForm } from '@uiw-admin/components'
import { Button } from 'uiw'
const Demo = () => {
  const [state,setState] = React.useState({})
  const form = useForm()
   const [option] = React.useState([
    { value: 1, label: '苹果' },
    { value: 2, label: '西瓜' },
    { value: 3, label: '香蕉' },
    { value: 4, label: '东北大冻梨' },
    { value: 5, label: '香蕉' },
    { value: 6, label: '葡萄' },
    { value: 6, label: '哈密瓜' },
   ])
   const [loading, setLoading] = React.useState(false)
   // 模拟搜索
  const handleSearch = ( type = '' , name = '' ) => {
    if (type === 'searchSelect') {
      setLoading(true)
      setTimeout(() => {
        setLoading(false)
      }, 2000)
    }
  }
    return (
     <div>
       <ProForm
         form={form}
         title="通过form api进行表单提交"
         formType="card"
         formDatas={ [
              {
              label: 'searchSelect',
              key: 'searchSelect',
              widget: 'searchSelect',
              option: option,
              required:true,
                rules:[{ required: true, message: '请输入' }],
              widgetProps: {
                mode:"multiple",
                onSearch: handleSearch.bind(this,'searchSelect'),
                onChange: (value) => console.log('changevalue', value),
                onSelect: (value) => console.log('selectvalue', value),
                loading: loading,
                allowClear: true,
                showSearch: true,
                style:{ width:"100%" }
              },
            },
          ]}
       />
       <Button 
        style={{ marginTop:10,width:80 }} 
        type="primary" 
        onClick={async()=>{
          // 触发验证
          await form.submitvalidate();
          // 获取错误信息
          const errors = form.getError()
          if(errors && Object.keys(errors).length > 0 ) return
          const value = form.getFieldValues?.()
          setState(value)
         // 调用请求接口
       }}
       >
        保存
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

预期行为

我在表单使用时,给予必填参数后,直接点击提交,提示的样式就出现问题了

截图

如图:
项目中使用:
image

文档中使用:
image

桌面(请填写以下信息):

  • UIW:[v4.21.3]
  • 操作系统:[macOS]
  • 浏览器:[Chrome]
nullptr-z added a commit that referenced this issue Apr 26, 2022
style(SearchSelect): 修复错误验证的样式#793
@nullptr-z
Copy link
Collaborator

@hy916 已修复

github-actions bot added a commit that referenced this issue Apr 26, 2022
style(SearchSelect): 修复错误验证的样式#793 5e6a96a
jaywcjlove pushed a commit that referenced this issue Apr 26, 2022
style(SearchSelect): 修复错误验证的样式#793 5e6a96a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants