我在输入复选框的数据和输入文本之间遇到显示问题
我试图将 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>
);
})
这是我的输入复选框
这是我的输入文本
这是我的展示故事
当我先选择复选框或文本时,如何以正确的顺序显示字母?
维护一个单独的数组来表示所需的显示顺序。然后你可以迭代这个数组
// 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>
);