如何處理帶有樣式更改的按下和取消按下可觸摸組件？

Question

我的想法是創建一個像按鈕一樣的特定 Touchable 組件，並具有按下和未按下的感覺，並在我的應用程序上多次使用該組件，但一次只能按下一個。 如果先觸摸一個然后再觸摸另一個，則應先松開第一個，然后按第二個。 思路不是用Redux來解決這個問題。

我已經在處理按下哪個組件，並通過道具將操作發送到組件。 但我不知道如何以通用方式同時管理所有按鈕，我的意思是，不是為每個按鈕創建一個變量。

我的應用程序：

<View>
<ActivityButton activityTitle={"B1"} submit={() => this.submitHandler("B1")} />
<ActivityButton activityTitle={"B2"} submit={() => this.submitHandler("B2")} />
</View>

我的組件（活動按鈕）：

this.state={active:false}

<TouchableOpacity style={this.state.active ? styles.buttonPress : styles.button} onPress={this.props.submit}>
                <View>
                    <Text>{this.props.activityTitle}</Text>
                </View>
</TouchableOpacity>

Answer 1

我假設您正在嘗試做類似單選按鈕組的事情？ 如果您的按鈕僅位於單個頁面中，您可以通過使用MyApp中的狀態來檢查啟用了哪些按鈕而不是按鈕本身來實現。

我的應用程序

constructor(props) {
    super(props);
    this.state = {
        buttonIdThatEnable: "",
    };
}

submitHandler = (buttonId) => {
    this.setState({
        buttonIdThatEnable: buttonId,
    });
}

render() {
    return (
        <View>
            <ActivityButton
                activityTitle={"B1"}
                active={this.state.buttonIdThatEnable === "B1"}
                submit={() => this.submitHandler("B1")}
            />
            <ActivityButton
                activityTitle={"B2"}
                active={this.state.buttonIdThatEnable === "B2"}
                submit={() => this.submitHandler("B2")}
            />
        </View>
    )
}

ActivityButton（使用props.active確定樣式）

<TouchableOpacity style={this.props.active ? styles.buttonPress : styles.button} 
    onPress={this.props.submit}>
                <View>
                    <Text>{this.props.activityTitle}</Text>
                </View>
</TouchableOpacity>

如果你的 Buttons 位於不同的組件中並且你不想使用 Redux，你可以考慮React Context API