Question

我正在尝试使用redux形式，但是，正如我所阅读的，我需要输入字段的HOC才能将onTextChange替换为onChange。我有：

import React from 'react';
import {Input} from 'native-base';

export default function InputField(props) {
    const { input, ...inputProps } = props;

    return (
        <Input
            {...inputProps}
            onChangeText={input.onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            value={input.value}
        />
    );
};

并以我的形式使用它：

<Item style={{marginTop: 10, width: "100%"}}>
    <Field name="login" component={(props) => {
        return (
            <InputField {...props} keyboardType="email-address" placeholder='E-mail' />
        )
    }}/>
</Item>

但每次I型键，该字段失去焦点。一些“专家”建议使用对焦（）函数。但是，如果我在中间编辑文本怎么办？有什么办法吗？还是基于本机的文本字段组件兼容？

Answer 1

这很奇怪，但是有效））

function InputFieldEmail(props) {
    return <InputField {...props} keyboardType="email-address" placeholder='E-mail' />;
}

并使用它代替箭头功能

<Field name="login" component={InputFieldEmail}/>

我觉得很奇怪）

Answer 2

必须提供 InputField 组件作为 prop 使其值保持不变或者放在 Item 组件外面，当它在另一个组件里面时，每次更新上层的状态，下层都被强制返回.开始。

如果您的 Input 位于 Item 内，则您可能使用的是 FlatList，而您的目标是将其放入标题中。

你可以试试这样的：

<View style={{marginTop: 10, width: "100%"}}>
    <Field name="login" component={(props) => {
        return (
            <InputField {...props} keyboardType="email-address" placeholder='E-mail' />
        )
    }}/>
</View>
<FlatList
    ListHeaderComponent={() => {
        <Item>
        </Item> 
     }}
/>

记得把 Item 中的样式放在 View 中。

输入符号后，redux形式的React-native输入HOC失去焦点

2 个答案: