javascript - 在for循环中单击时如何禁用按钮单元？

Question

我的 React 代码中有一个双 for 循环，我想在单击按钮时正确禁用它。我尝试可能发送一个数组并单击按钮，但这每次都会出错。这似乎比我做的要容易。单击时如何禁用正确的按钮？

state = {
        updated: [],
        key: 0
    };

这是我的自定义表

const CustomTable = ({ element, handleUpdate, updated, key}) => (
    <Table>
        <Table.Header>
        <Table.Row>
            <Table.HeaderCell>Type</Table.HeaderCell>
            <Table.HeaderCell>Update</Table.HeaderCell>
        </Table.Row>
        {Object.keys(element).map(function(dataType) {
            return (
                Object.keys(element[dataType]).map(function(data, i){
                    return (
                        <Table.Row key = {i}>
                            <Table.Cell>{data + " " + dataType}</Table.Cell>
                            <Table.Cell>
                            <Button content='Update Row' color='green' disabled = {updated.indexOf(key) > 1}
                                style={{margin: 0}} 
                                onClick = {() => handleUpdate(key)}
                                />
                            </Table.Cell>
                        </Table.Row>
                        );
                    })
            )})
        }

        </Table.Header>
</Table>

);

标签： javascriptreactjs

Answer 1

我会这样做。

const SomeComponentAbove = () => {
   const [disabled, setDisabled] = useState(false);

   const handleUpadte = async () => {
     setDisabled(true);
     await doSomething();
     setDisabled(false);
   }

   return <CustomTable handleUpdate={handleUpdate} disabled={updated.indexOf(key) > -1} key={key} />
}



const CustomTable = ({ element, handleUpdate, disabled, key}) => (
  <Table>
      <Table.Header>
      <Table.Row>
          <Table.HeaderCell>Type</Table.HeaderCell>
          <Table.HeaderCell>Update</Table.HeaderCell>
      </Table.Row>
      {Object.keys(element).map(function(dataType) {
          return (
              Object.keys(element[dataType]).map(function(data, i){
                  return (
                      <Table.Row key = {i}>
                          <Table.Cell>{data + " " + dataType}</Table.Cell>
                          <Table.Cell>
                          <Button content='Update Row' color='green' disabled = {disabled}
                              style={{margin: 0}} 
                              onClick = {() => handleUpdate(key)}
                              />
                          </Table.Cell>
                      </Table.Row>
                      );
                  })
          )})
      }

      </Table.Header>
</Table>

);

你创建一个没有状态的组件，它只是使用你给它的道具来显示一些视觉表示。在您的 handleUpdate 函数中，您需要管理状态更改，因此呈现 CustomTable 的组件需要处理这些。您需要更改“更新”以将按钮设置为禁用或不禁用。