react antd input/select 当动态调用接口搜索时，去除输入框输入拼音被收集到当作入参

最新推荐文章于 2024-12-18 20:50:03 发布

Michael_Cheng_09

最新推荐文章于 2024-12-18 20:50:03 发布

阅读量611

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/zihang_cheng/article/details/130493512

该段代码展示了一个React组件，它是一个禁用状态下基于搜索的Select组件。当用户输入拼音时，会触发搜索功能，通过`handleComposition`处理拼音输入。组件使用了debounce函数优化搜索请求，并在加载中显示Loading提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            let isComposition = false;

            <Col span={8}>
              <Item name={'replaceStandardNo'} label="代替标准号：">
                <Select
                  disabled={!!selectedPj}
                  showSearch
                  allowClear
                  onClear={() => infoForm.setFieldValue('replaceStandardNo', '')}
                  defaultActiveFirstOption={false}
                  filterOption={false}
                  onSearch={(txt) => handleChange(txt, 'replace')}
                  notFoundContent={null}
                  optionLabelProp="title"
                  dropdownRender={(menu) => (
                    <>
                      {!replaceLoading ? (
                        menu
                      ) : (
                        <div style={{ height: '160px' }}>
                          <LoadingTip status={0} />
                        </div>
                      )}
                    </>
                  )}
                  options={replaceNoOpts
                    .filter((el) => el.standardNo)
                    .map((el) => ({
                      label: `${el.standardName} / ${el.standardNo}`,
                      value: el.standardNo,
                    }))}
                  onCompositionStart={handleComposition}
                  onCompositionEnd={handleComposition}
                ></Select>
              </Item>
            </Col>

// 输入拼音时搜索文字的处理
  const handleComposition = (ev) => {
    isComposition = ev.type !== 'compositionend';
  };

// 立项搜索值变化函数
  const handleChange = debounce((txt, from) => {
    let searchTxt;
    if (!isComposition) {
      searchTxt = txt;
    }
    from === 'project'
      ? searchTxt !== undefined && getProjectList(searchTxt)
      : searchTxt !== undefined && getReplaceNo(searchTxt);
  }, 300);