2

在我的 React Native 0.62.3 应用程序中，amodal用于收集用户输入。这是查看代码：

import { Modal, View, TextInput, Button } from 'react-native';
const [price, setPrice] = useState(0);
const [shippingCost, setShippingCost] = useState(0);
const ReturnModal = () => {
        if (isModalVisible) {
            return (
                <View style={styles.modalContainer}>
                <Modal visible={isModalVisible} 
                            animationType = {"slide"}
                            transparent={false} 
                            onBackdropPress={() => setModalVisible(false)}>
                        <View style={styles.modal}>
                            <Text>Enter Price</Text>
                            <TextInput keyboardType={'number-pad'} onChange={priceChange} value={price} autoFocus={true} placeholder={'Price'} />
                            <TextInput keyboardType={'number-pad'} onChange={shChange} value={shippingCost}  placeholder={'SnH'} />
                            <View style={{flexDirection:"row"}}>
                            <Button title="Cancel" style={{bordered:true, backgroundColor:'red'}} onPress={modalCancel} />
                            
                            <Button title="OK" style={{bordered:true, backgroundColor:'white'}} onPress={modalOk} />
                            </View>
                        </View>
                    </Modal>
                </View>
            )    
        } else {
            return (null);
        }
    }

    return (
            <Container style={styles.container}>
               //.....view code

              <ReturnModal />
      
          </Container>
    )

这是重置price和状态的 2 个函数shippingCost：

  const priceChange = (value) => {
    if (parseFloat(value)>0) {
        setPrice(Math.ceil(parseFloat(value)));
    }
};

const shChange = (value) => {
    if (parseFloat(value)>=0) {
        setShippingCost(Math.ceil(parseFloat(value)));
    }
};

问题是，每当通过按键输入价格字段时，模式都会自动重新加载/重置。试过onChangeText了TextInput，也有同样的问题。

4

2 回答 2

1

好像你在你的组件之外声明你的钩子。尝试将它们放在您的 ReturnModal 函数中，如下所示：

const ReturnModal = () => {
  const [price, setPrice] = useState(0);
  const [shippingCost, setShippingCost] = useState(0);
  ...

文档参考：使用状态挂钩。

另外，我强烈建议使用React Hooks ESLint 插件（以及其他）来检测你的钩子问题。以下是如何将其添加到您的 React Native 项目的指南：将 Eslint 支持添加到您的 React Native 项目 + React Hooks 规则。

于 2021-02-18T10:19:18.737 回答
0

而不是使用 animationType = {"slide"} 尝试使用 animatonType : 'none'

于 2022-01-22T15:34:32.350 回答