javascript - 剑道反应自动完成不过滤
问题描述
我有多步表格,下面是其中一个字段:
<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
实现这一点有点新。谢谢!
解决方案
推荐阅读
- android - 未调用 PendingIntent.getBoradcast 广播接收器
- python - 为什么我的 jupyter 内核在导入 numpy 时在虚拟环境中运行时会死机?
- ios - 强制从用户设备中删除/失效 iOS 应用程序
- python - 如何在pyglet中使用原始像素数据来改变图像大小
- awk - 如何在bash中按行将文件随机拆分为三个相等的文件?
- python-3.x - 如何将熊猫数据框从宽形拆分为高形
- php - 无法通过 AJAX/Fancybox 将数据发布到 PHP 文件
- c - 在结构数组中进行二进制搜索
- java - 无法在maven中安装包
- pandas - 两列数据分组