0

我有多步表格，下面是其中一个字段：

<div className={style.formFieldsInsuranceWrapper}>
    <Field
        key={'Insurance'}
        id={'Insurance'}
        name={'Insurance'}
        label={'Insurance: '}
        textField={"Name"}
        component={this.FormInsuranceDropDownList}
        data={this.state.FilteredInsuranceList}
    />
</div>

上面的组件属性采用以下具有实际自动完成功能的功能。

FormInsuranceDropDownList (fieldRenderProps: FieldRenderProps) 
{
    const { validationMessage, value, touched, label, visited, id, valid, disabled, hint, wrapperStyle, ...others } = fieldRenderProps;
    const editorRef = React.useRef(null);

    const showValidationMessage = touched && validationMessage;
    const showHint = !showValidationMessage && hint;
    const hintId = showHint ? `${id}_hint` : '';
    const errorId = showValidationMessage ? `${id}_error` : '';
    const labelId = label ? `${id}_label` : '';
    var val = fieldRenderProps.value;

    if (touched && visited && val !== undefined && (this.state.SelectedInsurance === null || this.state.SelectedInsurance.Name !== val)) {
        var ob: Array<Insurance> = fieldRenderProps.data;
        var selectedItem: Insurance | undefined = ob.find(x => x.Name === fieldRenderProps.value)

        if (selectedItem !== undefined) {
            this.setState({
                SelectedInsurance: selectedItem
            });

            val = undefined;
        }
        
    }

    const onChange = (event: AutoCompleteChangeEvent) => {
        const value: string = event.value;

        const filter = {
            value: value,
            operator: "contains",
            ignoreCase: true,
        };

        var newData = value ? filterBy(this.injected.InsuranceList, filter) : this.injected.InsuranceList;
        
        this.setState({
            FilteredInsuranceList: newData
        });

    };

    return (
        <FieldWrapper style={wrapperStyle}>
            <Label
                id={labelId}
                editorRef={editorRef}
                editorId={id}
                editorValid={valid}
                editorDisabled={disabled}
            >
                {label}
            </Label>
            <AutoComplete
                ariaLabelledBy={labelId}
                ariaDescribedBy={`${hintId} ${errorId}`}
                ref={editorRef}
                valid={valid}
                id={id}
                //disabled={disabled}
                onChange={onChange}
                //data={data}
                //value={}
                {...others}
            />          
        </FieldWrapper>
    );
}

一旦用户开始输入自动完成功能，我就会尝试过滤列表。但它没有过滤，我无法进入 DevTools 上的 onChange ..似乎它没有使用 newData 设置状态 FilteredInsuranceList。

Kendos 示例在这里工作正常。https://stackblitz.com/run/?file=app/main.jsx

实现这一点有点新。谢谢！

4

0 回答 0