如何将自己的事件侦听器添加到自定义react本机组件？

6ioyuze2 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(327)

所以我使用react native+expo，制作了一个自定义组件，它是一个步进器。看起来像这样：

这是它的代码：

import React, { useState } from 'react';
import { View, Text,StyleSheet, TouchableOpacity } from 'react-native';

const Stepper = (props) => {
    let counter = 0;

    const increment = () => {
        counter += 1

    }

    const decrement = () => {
        counter -= 1
    }

    return (

        <View style={{ ...styles.stepperStyle, ...props.containerStyle }}>
            <TouchableOpacity style={{
                backgroundColor: props.leftColor,
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                borderTopLeftRadius: props.radius,
                borderBottomLeftRadius: props.radius
            }}>
                <Text adjustsFontSizeToFit={true} style={{ fontSize: 40 }}>-</Text>
            </TouchableOpacity>
            <View style={{
                borderLeftWidth: 1,
                borderRightWidth: 1,
                alignItems: 'center',
                justifyContent: 'center',
                flex: 1
            }}>
                <Text style={props.labelStyle}>{props.initialValue} {props.label}</Text>
            </View>
            <TouchableOpacity style={{
                backgroundColor: props.rightColor,
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                borderTopRightRadius: props.radius,
                borderBottomRightRadius: props.radius
            }}>
                <Text adjustsFontSizeToFit={true}
                    style={{ fontSize: 40 }}>+</Text>
            </TouchableOpacity>
        </View>

    );

}

const styles = StyleSheet.create({
    stepperStyle: {
        backgroundColor: 'transparent',
        flexDirection: 'row',
        borderRadius: 100,
        borderWidth: 1,
        width: '100%',
        height: 42
    }

});
export default Stepper

我想做的是制作某种类型的事件侦听器或函数，它可以在计数器值发生更改时返回计数器值。
所以从外面看，我希望它看起来像这样：

<Stepper
   onValueChange={count => setSets(count)}
/>

我对做这样的事情还不熟悉。我需要使用useeffect挂钩吗？获取当前计数器值的最佳方法是什么？任何帮助都将不胜感激！

JavaScript reactjs react-native expo

来源：https://stackoverflow.com/questions/68340728/how-can-i-add-my-own-event-listener-to-my-custom-react-native-component

1条答案

按热度按时间

34gzjxbg1#

因为看起来您希望组件中的值与状态匹配 sets 在组件之外，处理此问题的最合理方法是将 sets 及 setSets 作为道具，使用并调用这些道具 increment 及 decrement .

<Stepper
   {...{ sets, setSets }}
/>

const Stepper = ({ sets, setSets }) => {
    const increment = () => setSets(sets + 1);
    const decrement = () => setSets(sets - 1);
    // other code that references increment and decrement and sets

如果外部状态名称可以更改，请使用

<Stepper
    counter={sets} setCounter={setSets}
/>

const Stepper = ({ counter, setCounter }) => {
    const increment = () => setCounter(counter + 1);
    const decrement = () => setCounter(counter - 1);
    // other code that references increment and decrement and counter

赞(0）回复(0）举报 2021-09-13

我来回答

如何将自己的事件侦听器添加到自定义react本机组件？

1条答案

相关问题

热门标签

最新问答