更改 redux 对象的值时，FlatList 项中的 TextInput 变得不集中

Posted 2023-03-13

【中文标题】更改 redux 对象的值时，FlatList 项中的 TextInput 变得不集中

【英文标题】：TextInput in FlatList item gets unfocused when changing value of redux object

【发布时间】：2021-07-28 06:31:48

【问题描述】：

我正在使用我的 redux 存储中安全的嵌套对象来呈现我的 FlatList。在每个设置项目中，我都有一个 textInput 来更改我设置中的代表，但是每次我更改输入的值时，它都会失去焦点并且键盘会消失。他们是一种阻止注意力不集中的输入的方法吗？

我尝试在平面列表和我的 Item 组件中插入 key 属性，但这没有帮助。 还试图删除我的 FlatList 的 extraData 属性。我想在这种情况下没有必要拥有这个。

有人可以帮忙吗？

我的对象：

Workout:
    ExercisList:[
        
           sets to render:[
            set 1 ,
            set 2,
            set 3,
           ]
        ,
        .
        .
        .
    ]

平面列表：

<View>
<FlatList
      data=workout.exerciseList.find((exerciseList) => exerciseList.elid === route.params.elid)?.sets
      renderItem=renderItem
      extraData=workout.exerciseList.find((exerciseList) => exerciseList.elid === route.params.elid)?.sets
      keyExtractor=(item) => item.sid.toString()
/>
</View>

渲染项：

const renderItem = ( item :  item: Set ) => 
    return (
        <Item
            key=item.sid
            sid=item.sid
            elid=item.elid
            sortOrder=item.sortOrder
            reps=item.reps
            weightKG=item.weightKG
            weightLBS=item.weightLBS
            finished=item.finished
        />
    );
;

项目：

    const Item = ( sortOrder, reps, weightKG, weightLBS, sid, elid : Set, key: any) => 
    return (
        <Swipeable
            rightThreshold=30
            renderRightActions=() => (
                <View style= backgroundColor: "red" >
                    <Text>Delete</Text>
                </View>
            )
            onSwipeableRightOpen=() => console.log("Delete Set")
        >
            <View style=styles.item key=key>
                <Text>sortOrder</Text>
                <Text>lang.t("reps")</Text>
                <TextInput
                    key=sid
                    onChangeText=(reps) => changeReps(reps, sid, elid)
                    value=reps.toString()
                    keyboardType='number-pad'
                ></TextInput>
                
            </View>
        </Swipeable>
    );
;

变更代表 这里我的 redux 商店中的锻炼对象发生了变化。

const changeReps = (reps: string, sid: string, elid: string) => 
    dispatch(updateRepsWorkout(parseInt(reps), sid, elid));
;

【参考方案1】：

找到以下解决方法：

我在每个项目组件中为我的代表设置了一个状态。当 OnChangeText 被触发时，只有状态更新。之后，只有当 textInput 失去焦点时，我才更新我的 redux 存储对象。

const Item = ( sortOrder, reps, weightKG, weightLBS, sid, elid, finished, index : any) => 
    const [outputReps, setOutputReps] = React.useState(reps.toString());

    return (
        <Swipeable
            rightThreshold=30
            renderRightActions=() => (
                <View style= backgroundColor: "red" >
                    <Text>Delete</Text>
                </View>
            )
            onSwipeableRightOpen=() => console.log("Delete Set")
        >
            <View style=styles.item>
                <Text>sortOrder</Text>
                <Text>lang.t("reps")</Text>
                <TextInput
                    key=sid
                    onChangeText=(reps) => setOutputReps(reps) <-- Here I change state!
                    onEndEditing=() => changeReps(outputReps, sid, elid) <-- here I change my redux object 
                    value=outputReps
                    keyboardType='number-pad'
                ></TextInput> 
            </View>
        </Swipeable>
    );