React中点击按钮如何启用指定的多个输入字段？

我渲染了一些字段：

const elements = [
    {
      data: [
        {
          name: 'item1',
          title: 'Item 1',
          data: data.item1,
        },
        {
          name: 'item2',
          title: 'Item 2',
          data: data.item2,
        },
        {
          name: 'item3',
          title: 'Item 3',
          data: data.item3,
        },
        {
          name: 'item4',
          title: 'Item 4',
          data: data.item4,
        },
      ],
    },
    ...
]

通过子组件渲染（使用Grommet，不影响核心逻辑）：

const [disabled, setDisabled] = useState(true);

{elements.map((col, index) => (
      <Box pad="xsmall" key={index} fill>
        <Table>
          <TableBody>
            {col.data.map((el, index) => (
              <SomeComponent
                key={index}
                title={el.title}
                data={el.data}
                name={el.name}
                disabled={disabled}
              />
            ))}
          </TableBody>
        </Table>
      </Box>
    ))}

我希望点击“编辑”按钮时启用特定字段：

const updateFields = [ 'item2' , 'item4']

按钮代码：

<Box direction="row" pad="xsmall" justify="end">
        <Button
          gridArea="search-button"
          label="Edit"
          size="medium"
          secondary
          onClick={() => {
            // 如何遍历渲染的元素，对比其name，若在updateFields列表中则将disabled设为false？
            disabled ? setDisabled(false) : setDisabled(true);
          }}
        />
      </Box>

核心需求：点击编辑按钮后，仅updateFields列表中指定name的组件（item2、item4）将disabled设为false，其余保持禁用状态。

不要用单一的disabled状态控制所有组件，改成用状态记录当前是否处于编辑模式，再结合每个组件的name动态判断禁用状态。

具体实现步骤 #

1. 替换原有状态，改为记录编辑模式的开关：

// 初始为非编辑状态
const [isEditing, setIsEditing] = useState(false);

2. 修改按钮点击逻辑，切换编辑模式：

<Button
  gridArea="search-button"
  label="Edit"
  size="medium"
  secondary
  onClick={() => setIsEditing(!isEditing)}
/>

3. 渲染子组件时，动态计算disabled属性：

• 非编辑模式下，所有组件保持禁用
• 编辑模式下，仅name在updateFields中的组件启用，其余仍禁用

{col.data.map((el, index) => (
  <SomeComponent
    key={el.name} // 建议用唯一标识当key，不要用index
    title={el.title}
    data={el.data}
    name={el.name}
    disabled={!isEditing || !updateFields.includes(el.name)}
  />
))}

优化建议 #

如果字段数量较多，可将updateFields转为Set提升判断效率：

const updateFieldsSet = new Set(updateFields);
// 渲染时判断：!updateFieldsSet.has(el.name)

内容的提问来源于stack exchange，提问作者zlobul