javascript - 输入字符后测试字段失去焦点
问题描述
我有一个具有可重新排序功能的输入字段列表,但问题是文本字段失去了对每个 onChange 命中的关注。我正在使用react-draggable-list包。
我查看了相关问题并尝试为所有组件提供密钥,但它仍然不起作用。
在这里找到我的代码库。
下面是我的表单的多输入字段。
import { Box, Button, IconButton, TextField } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import DragIcon from "@material-ui/icons/OpenWith";
import ReorderableList from "./ReorderableList";
import { uniqueId } from "lodash";
import React, { FC, useState } from "react";
export interface ReorderableTierFieldProps {}
const ReorderableTierField: FC<ReorderableTierFieldProps> = (props) => {
const [values, setValues] = useState<{ name: string; id: string }[]>([
{ name: "Input", id: uniqueId() }
]);
const handleRemove = (itemIndex: number) => {
let items = [...values];
items.splice(itemIndex, 1);
setValues([...items]);
};
const renderAssetItem = (
item: any,
dragHandleProps: any = {},
dragged?: boolean
) => {
return (
<Box display="flex" mb={2}>
<TextField
key={`text`}
value={values[item.itemIndex].name || ""}
onChange={(v) => {
let items = [...values];
items[item.itemIndex].name = v.target.value;
setValues([...items]);
}}
/>
<IconButton size="small" onClick={() => handleRemove(item.itemIndex)}>
<CloseIcon />
</IconButton>
<div id="drag" className="drag" {...dragHandleProps}>
<DragIcon />
</div>
</Box>
);
};
const onReorder = (newList: any[]) => {
setValues([...newList]);
};
const onAdd = () => {
setValues((v) => [...v, { id: uniqueId(), name: "" }]);
//formikProps.setFieldValue('partnerTiers', [...values, { id: uniqueId() }])
};
return (
<Box width={"100%"} key="gamma">
<ReorderableList<{ id: string; name: string }>
key="beta"
list={values.map((ite, index) => ({ ...ite, itemIndex: index }))}
handleUpdateListOrder={onReorder}
renderItem={renderAssetItem}
/>
<Button size="small" onClick={onAdd}>
{"Add tier"}
</Button>
</Box>
);
};
export default ReorderableTierField;
下面是可重新排序的列表组件。
import React, { Component } from "react";
import DraggableList, { TemplateProps } from "react-draggable-list";
import { Box } from "@material-ui/core";
interface IProps<T = any> {
list: T[];
handleUpdateListOrder: (
nexList: T[],
movedItem: T,
oldIndex: number,
newIndex: number
) => void;
renderItem: (
item: T,
dragHandleProps: any,
dragged: boolean
) => React.ReactElement;
}
function ReorderableList<T extends any>(props: IProps<T & { id: string }>) {
const { list } = props;
class MyRender extends Component<TemplateProps<T & { id: string }, unknown>> {
render() {
let { item, itemSelected, dragHandleProps } = this.props;
const dragged = itemSelected !== 0;
return props.renderItem(item, dragHandleProps, dragged);
}
}
return (
<Box key="list_container">
<DraggableList
key="display"
list={list || []}
itemKey={(ite) => ite.id}
template={MyRender as any}
onMoveEnd={(nexList, movedItem, oldIndex, newIndex) =>
props.handleUpdateListOrder(
[...nexList],
movedItem,
oldIndex,
newIndex
)
}
/>
</Box>
);
}
export default ReorderableList;
解决方案
将 autoFocus 属性添加到 TextField
<TextField
id={item.itemIndex}
autoFocus={currentItem === item.itemIndex}
value={values[item.itemIndex].name || ""}
onChange={(v) => {
let items = [...values];
items[item.itemIndex].name = v.target.value;
setCurrentItem(item.itemIndex);
setValues([...items]);
}}
/>
我对您的代码进行了修改,请在此处查看
推荐阅读
- ios - CallKit CXCallController.request error com.apple.CallKit.error.requesttransaction Code=6 而应用程序在后台
- asp.net-core - 如何使用本机 .Net Core OAuth 授权允许 Kestrel 接受自签名证书?
- python - 多索引而不是 groupby
- google-sheets - 从 Google 表格范围内随机化单元格值
- java - 无法访问传递性 Maven 模块的代码
- php - 在 Ubuntu 19 上找不到 php7.3
- go - 没有使用 gorm 推送空结构
- syntax - Cobol 的语法帮助
- android - 每次滚动列表时,毕加索图像都会在列表视图中重新加载
- security - 由于 odoo12 POS 中的安全限制,请求的操作无法完成?