反应原生的 Redux 表单，带有值的 onChangeText 无法正常工作答案

【问题标题】：Redux Form in react native, onChangeText with Value not work correcly反应原生的 Redux 表单，带有值的 onChangeText 无法正常工作
【发布时间】：2019-11-12 12:22:20
【问题描述】：

我将 TextInput 与 onChangeText 和 Value 一起使用，Value 用于使用 initialValues，onChangeText 用于更改此值。

当我只使用不带值的 onChangeText 时，它可以正常工作，但是当我使用 onChangeText 和 Value 时，它不能正常工作。

我上传了显示错误的图片。我想写“嗨，你好吗？”

您可以在以下链接中看到错误：

https://i.stack.imgur.com/MiVNn.gif

我的代码：

import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

const fieldNombre = (props) => {

    return (
        <TextInput
            placeholder="Field nom"
            onChangeText={props.input.onChange}
            value={props.input.value}
            style={{borderWidth: 1, borderColor: 'white', color: 'white'}}
        />
    );
};

class EditForm2 extends Component {

    render() {
        console.log('this.props.initialValues');
        console.log(this.props.initialValues);
        return (
            <View>
                <Field name="firstName" component={fieldNombre} />
                <WhiteText>Redux Form</WhiteText>
                <Button
                    title="Registrar"
                    onPress={this.props.handleSubmit((values) => {
                        console.log(values);
                    })}
                />
            </View>
        );
    }
};

const mapStateToProps = (state) => {
  return {
    initialValues: {
      firstName: 'aaaaa',
      lastName: 'bbbbb',
      email: 'cccccc'
    }
  }
}

export default connect(mapStateToProps)(reduxForm({ form: 'EditForm2', enableReinitialize: true})(EditForm2))

【问题讨论】：

也请分享TextInput源代码。
@JordanEnev TextInput 是从 react-native 导入的
您能否检查我的答案是否解决了您的用例？谢谢！
我还没来得及检查。在我必须完成另一个项目之前。我会尽快回复你。谢谢

标签： javascript forms react-native redux redux-form

【解决方案1】：

我猜，您应该将大部分 redux-form props.input 传递给 react-native <TextInput />。

这是一个完整的包装，取自 Easy forms in React Native with Redux Form 文章：

Input.js：

import React from 'react';
import { TextInput, View, Text } from 'react-native';

// Your custom Input wrapper (adapter betwen `redux-form` and `react-native`
export default ({ input, ...inputProps }) => (
  <View>
    <TextInput
      {...inputProps}
      onChangeText={input.onChange}
      onBlur={input.onBlur}
      onFocus={input.onFocus}
      value={input.value}
      />
  </View>
);

用法：

<Field name="firstName" component={Input} />

【讨论】：

谢谢，但它不适合我...错误仍然是一样的...

【解决方案2】：

同样的事情也发生在我身上。对我来说，它只是将 value 属性更改为 defaultvalue

Here完整解释

【讨论】：