Javascript 输入字符后，测试字段失去焦点

我有一个具有可重新排序功能的输入字段列表，但问题是文本字段在每次点击时都会失去焦点。 我正在使用软件包

我研究了相关的问题，并尝试给出所有组件的键，但仍然不起作用

找到我的代码库

下面是我的表单的多输入字段

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;

从“@material ui/core”导入{Box，Button，IconButton，TextField}；
从“@material ui/icons/Close”导入CloseIcon；
从“@material ui/icons/OpenWith”导入DragIcon；
从“/ReorderableList”导入ReorderableList；
从“lodash”导入{uniqueId}；
从“React”导入React，{FC，useState}；
导出接口ReorderableTierFieldOps{}
常量重设等级：FC=（道具）=>{
const[values，setValues]=useState([
{name:“Input”，id:uniqueId（）}
]);
常量handleRemove=（itemIndex:number）=>{
让项目=[…值]；
项目.拼接（项目索引，1）；
设置值（[…项]）；
};
常数renderAssetItem=(
项目：任何，
dragHandleProps:any={}，
拖动？：布尔值
) => {
返回(
{
让项目=[…值]；
items[item.itemIndex].name=v.target.value；
设置值（[…项]）；
}}
/>
handleRemove（item.itemIndex）}>
);
};
const onReorder=（newList:any[]）=>{
setValues（[…newList]）；
};
const onAdd=（）=>{
setValues（（v）=>[…v，{id:uniqueId（），名称：“}]）；
//formikProps.setFieldValue（'partnerTiers'，[…值，{id:uniqueId（）}]）
};
返回(
（{…ite，itemIndex:index}）
HandleUpdateListorOrder={onReorder}
renderItem={renderAssetItem}
/>
{“添加层”}
);
};
导出默认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;

import React，{Component}来自“React”；
从“react DragableList”导入DragableList，{TemplateProps}；
从“@material ui/core”导入{Box}”；
接口IProps{
名单:T[];；
手动数据记录器：(
nexList:T[]，
movedItem:T，
旧索引：编号，
新索引：编号
)=>无效；
renderItem：(
项目：T，
道具：任何，
拖动：布尔值
)=>React.React元素；
}
功能可重设列表（道具：IProps）{
const{list}=props；
类MyRender扩展组件{
render（）{
让{item，itemSelected，dragHandleProps}=this.props；
常量拖动=itemSelected！==0；
返回道具.renderItem（物品，拖拽道具，拖拽）；
}
}
返回(
ite.id}
模板={MyRender as any}
onMoveEnd={（nexList、movedItem、oldIndex、newIndex）=>
道具.手持设备(
[…nexList]，
movedItem，
旧索引，
新索引
)
}
/>
);
}
导出默认的可重定向列表；

将自动对焦属性添加到文本字段

<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]);
          }}
        />

{
让项目=[…值]；
items[item.itemIndex].name=v.target.value；
setCurrentItem（item.itemIndex）；
设置值（[…项]）；
}}
/>

---

我修改了您的代码，请检查将自动对焦属性添加到文本字段

<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]);
          }}
        />

{
让项目=[…值]；
items[item.itemIndex].name=v.target.value；
setCurrentItem（item.itemIndex）；
设置值（[…项]）；
}}
/>

---

我对您的代码进行了修改，请检查

该解决方案不起作用，因为您将始终自动对焦列表中的最后一个元素，如果您添加更多输入字段，您将看到您的解决方案自动对焦列表中的最后一个输入字段。我添加了一些更改，现在它起作用了，请稍后再试look@McKHAANNN这对你有用吗？是的！我确实为我工作！好的，请接受我的回答，该解决方案不起作用，因为您将始终自动聚焦列表中的最后一个元素，如果您添加更多输入字段，您将看到您的解决方案自动聚焦列表中的最后一个输入字段。我添加了一些更改，现在它可以工作了，请look@McKHAANNN这对你有用吗？是的！我确实为我工作！好的，请接受我的答复