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

Question

I have a list of input fields with reorder-able functionality, but the issues is the textfield looses focus on every onChange hit. I am using react-draggable-list package.

I looked into related questions and tried giving keys to all the component but it still doesn't work.

Find my code base here .

Below is the Multi-Input field for my form.

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;

Below is Reorderable List component.

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

add autoFocus property to 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]);
          }}
        />

I did modification to your code please check here