dirty/pristine react-native 与 redux-form 的变化导致键盘被隐藏和闪烁

Question

我使用 redux-form 和 react-native 并且出于某种原因当表单状态从 dirty 到 pristine 当用户在输入中键入第一个字符时，键盘会隐藏并且屏幕会闪烁。这发生在 Android Nexus 5X 设备上。

查看组件：

const TextField = ({placeholder: p, ...props}) =>
    <Field {...props}
           component={({input}) => {
               return <TextInput
                   value={input.value}
                   onChange={input.onChange}
                   secureTextEntry={props.type === 'password'}
                   placeholder={p}
               />
           }}/>

const Login = ({submit}) =>
    <View>
        <Text>You need to log in</Text>
        <TextField placeholder="Name"
                   name="name"/>
        <Button title="Login" onPress={submit}/>
    </View>

export default login(Login)

login 是包裹在

中的 HOC

reduxForm({
            form: 'login',
            initialValues: {
                name: 'a',
            },
            onSubmit: vals => {
                console.log('submitting', vals)
            }
        })

react-native 中什么样的事件可以创建这样的行为？

Answer 1

所以最终问题与 redux-form 无关，而与使用内联匿名组件有关

({input}) => {
               return <TextInput
                   value={input.value}
                   onChange={input.onChange}
                   secureTextEntry={props.type === 'password'}
                   placeholder={p}
               />
           }

这样做只是为了 'prototyping' 目的，所以被忽略了。

像 const TextFieldComponent = ({input}) => ... 这样正常声明组件解决了问题。

dirty/pristine react-native 与 redux-form 的变化导致键盘被隐藏和闪烁

dirty/pristine changes in react-native with redux-form result in keyboard being hidden and flicker

android

reactjs

react-native

redux-form