輸入字符后測試字段失去焦點

Question

我有一個具有可重新排序功能的輸入字段列表，但問題是文本字段失去了對每個 onChange 命中的關注。 我正在使用react-draggable-list package。

我查看了相關問題並嘗試為所有組件提供密鑰，但它仍然不起作用。

在這里找到我的代碼庫。

下面是我的表單的多輸入字段。

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;

Answer 1

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

我對您的代碼進行了修改，請在此處查看