react 输入框模糊搜索

在这里插入图片描述

async fetch(value, callback) {
    const that = this
    let timeout
    let currentValue
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
    currentValue = value;

    async function fake() {

        const res = await that.request.findAllAdministrativeOrg({ name: value })
        console.log(res, "+++++++++++++")
        const data = [];
        res.data.forEach(r => {
            data.push({
                id: r.id,
                name: r.name,
            });
        });
        callback(data);
        console.log(data, "+=============+")
    }
    timeout = setTimeout(fake, 300);
}
handleSearch = (val) => {
    console.log(val, "33333333")
    this.fetch(val, data => this.setState({ findAllAdministratList: data }));
    console.log(this.state.findAllAdministratList, '4444444444')
};

handleChange = (val, b) => {
    console.log(val, b);
    this.setState({ performUnitCode: val, performUnitName: b.children, })
    this.fetch(val, data => this.setState({ findAllAdministratList: data }));
};

HTML

render() {
        const {  findAllAdministratList } = this.state
        const { Option } = Select;
        -------
        return <div>---------
			<Col span={12}>
			    <Form.Item name="performUnitCode" label="执行单位" rules={[{
			        required: true,
			        message: '请选择执行单位',
			    }]}>
			        <Select
			            showSearch
			            placeholder="请选择"
			            style={{ width: "100%", height: 32 }}
			            defaultActiveFirstOption={false}
			            showArrow={false}
			            filterOption={false}
			            onSearch={this.handleSearch}
			            onChange={this.handleChange}
			            notFoundContent={null}
			        >
			            {findAllAdministratList.map(item => {
			                return <Select.Option value={item.id}>{item.name}</Select.Option>
			            })}
			        </Select>
			    </Form.Item>
			</Col>

表单修改回显的时候需要再掉一遍

//详情接口
async selectPatrolTaskDto(params?) {
    const res = await this.request.selectPatrolTaskDto({ ...params, id: this.state.id })
    console.log(res)
    this.fillInput(res.data)
    this.setState({
        version: res.data.version
    }, () => {
        this.findAllAdministrativeOrgss(res.data.performUnitName)
    })
}
//下拉列表数据详情
async findAllAdministrativeOrgss(name) {
    const res = await this.request.findAllAdministrativeOrg({ name: name })
    console.log(res)
    const data = [];
    res.data.forEach(item => {
        data.push({
            id: item.id,
            name: item.name
        });
    });
    console.log(data, '111111111222')
    this.setState({
        findAllAdministratList: data
    }, () => {
    });
    console.log(this.state.findAllAdministratList, ')))))))))))))))))')
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐