React Native中点击任意按钮后如何在指定时长内禁用全部按钮

你的问题根源是每个ButtonGp组件都独立维护了自己的禁用状态，所以状态不会同步到其他组件。只需要把禁用状态提升到所有ButtonGp的公共父组件App中统一管理，再通过props把全局禁用状态和禁用触发方法传递给每个ButtonGp即可实现全局同步禁用。

1. 改造App组件 #

App作为父组件管理全局禁用状态，新增状态和全局禁用方法，传递给所有子组件：

import { useState } from 'react';

export default function App() {
  // 新增全局禁用状态
  const [globalDisabled, setGlobalDisabled] = useState(false);

  // 全局禁用所有按钮的方法
  const disableAllButtons = () => {
    setGlobalDisabled(true);
    setTimeout(() => setGlobalDisabled(false), 5000);
  };

  const sendData = (data) => {
    // 已禁用状态下不发送请求，避免重复触发
    if (globalDisabled) return;
    console.log(data);
    var url = `***********`;
    fetch(url);
  }

  return (
    <View style={styles.container}>
       <Text style={styles.header}>Control panel</Text>
       <View>
        <View style={styles.buttonsCol}>
          {/* 把全局禁用状态和禁用方法通过props传给每个ButtonGp */}
          <ButtonGp 
            name="Relais 1" 
            value1="000" 
            value2="001" 
            isDisabled={globalDisabled}
            onButtonClick={disableAllButtons}
            sendData={sendData}
          /> 
          <ButtonGp 
            name="Relais 2" 
            value1="010" 
            value2="011" 
            isDisabled={globalDisabled}
            onButtonClick={disableAllButtons}
            sendData={sendData}
          />
          {/* 其余所有ButtonGp都按上面的格式传props即可 */}
        </View>   
        <View style={styles.buttonsCol}>
          <ButtonGp 
            name="Relais 3" 
            value1="040" 
            value2="041" 
            isDisabled={globalDisabled}
            onButtonClick={disableAllButtons}
            sendData={sendData}
          />
          <ButtonGp 
            name="Relais 4" 
            value1="050" 
            value2="051" 
            isDisabled={globalDisabled}
            onButtonClick={disableAllButtons}
            sendData={sendData}
          />
        </View>    
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

2. 改造ButtonGp组件 #

删除自身维护的禁用状态，直接使用父组件传递的props即可：

class ButtonGp extends Component{
  render(){
    const { isDisabled, onButtonClick, sendData, value1, value2, name } = this.props;
    return(
      <View style={styles.buttonGroup}>
          <Text style={styles.text}>{name}</Text>
          <View style={styles.button}>
            <Button
              onPress={() => {
                sendData(value1); 
                onButtonClick();
              }}
              color="#0f0"
              title="On"
              disabled={isDisabled}
            />
            <Button
              onPress={() => {
                sendData(value2); 
                onButtonClick();
              }}
              color="#f00"
              title="Off"
              disabled={isDisabled}
            />
          </View>
      </View>
    );
  }
}

如果按钮组数量很多，你可以把按钮的配置项抽成数组，通过map循环渲染ButtonGp，不用手动重复写每个组件的props传递代码。

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