react高级组件ProForm实现输入框搜索

最新推荐文章于 2024-08-04 21:43:34 发布

YYuanDot

最新推荐文章于 2024-08-04 21:43:34 发布

阅读量214

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54368936/article/details/140845207

版权

实现界面

     <Col span={12}>
          <ProForm.Item
            name="name"
            label="推荐用户"
          >
            <AutoComplete
              className="pro-field pro-field-md"
              placeholder="请输入用户名"
              options={NameArr}
              onSearch={debounce(searchUser, 500)}
              onSelect={onSelect}
            />
          </ProForm.Item>
        </Col>

 //查询用户
  const searchUser = async (searchText: string) => {
    dispatch<UserAction>({
      type: 'user/check',
      payload: { keyword: searchText },
    });
  }
  const onSelect = (data: string) => {
    const nameitem = checkarr?.find(({ id }) => id === data)
    if (!nameitem) return
    const { name } = nameitem
    formRef?.current?.setFieldsValue({
      name
    });
    setparentUserId({data})
  };
  useEffect(() => {
    setNameArr((checkarr || []).map(({ id, name }) => ({
      value:id,
      label: `${name}`
    })))
  }, [checkarr])

formRef?.current?.setFieldsValue({name });目的为了设置选择后的value，而不是展示选择的id