时间戳

首页 > 解决方案 > 如何通过样式更改处理按下和取消按下的可触摸组件？

react-native - 如何通过样式更改处理按下和取消按下的可触摸组件？

问题描述

想法是创建一个特定的 Touchable 组件，其作用类似于按钮，并具有按下和未按下的感觉，并在我的应用程序上多次使用该组件，但一次只能按下一个。如果一个被触摸，然后另一个被触摸，第一个应该不被按下，第二个应该被按下。这个想法不是使用 Redux 来解决这个问题。

我已经在处理按下了哪个组件，并通过 props 将操作发送到组件。但我不知道如何以通用方式同时管理所有按钮，我的意思是，不是为每个按钮创建一个变量。

我的应用程序：

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

我的组件（ActivityButton）：

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>

标签： react-nativereactive-programmingtouchableopacity

解决方案

我假设您尝试执行单选按钮组之类的操作？如果您的按钮仅位于单个页面中，您可以通过使用 state inMyApp来检查启用了哪些按钮而不是按钮本身来实现。

我的应用

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

推荐阅读