如何优先考虑输入复选框和输入文本之间的可见性？

Question

我在输入复选框的数据和输入文本之间遇到显示问题

我试图将 2 个数组合并为 1 个数组，以便按照我从输入复选框或输入文本中选择的顺序显示，但它并不像我预期的那样，因为我从输入文本输入的值始终显示在输入复选框之后。

const arr1 = [...source.fields]
  const arr2 = [...source.calculates]
  const abc = arr1.concat(arr2).map((field, i) => {
      return (
        <td key={i} className={getClassNameBasedOnRole(field)}>
          {field.DISPLAY_NAME || field.field_name || field.display_name}
        </td>
      );
    })

这是我的输入复选框

这是我的输入文本

这是我的展示故事

当我先选择复选框或文本时，如何以正确的顺序显示字母？

Answer 1

维护一个单独的数组来表示所需的显示顺序。然后你可以迭代这个数组

// Assuming arr1 contains checkbox data and arr2 contains text input data

// Define the order of display based on user preference
const displayOrder = ['checkbox', 'text'];

// Merge the two arrays and sort them based on display order
const mergedArray = arr1.concat(arr2).sort((a, b) => {
  return displayOrder.indexOf(a.type) - displayOrder.indexOf(b.type);
});

// Render the merged array in the desired order
const abc = mergedArray.map((field, i) => {
  return (
    <td key={i} className={getClassNameBasedOnRole(field)}>
      {field.DISPLAY_NAME || field.field_name || field.display_name}
    </td>
  );
});

// Render the display table with the elements in the correct order
return (
  <table>
    <tbody>
      <tr>{abc}</tr>
    </tbody>
  </table>
);