在响应本机中的Redux Form，带有值的onChangeText不能正确工作 [英] Redux Form in react native, onChangeText with Value not work correcly

问题描述

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

I use TextInput with onChangeText and Value, Value for use initialValues, and onChangeText for change this value.

当我仅使用不带值的onChangeText时，它可以正确地工作，但是当我使用onChangeText和Value时，它不能正确地工作.

When I only use onChangeText without Value, it works correcly, but when I use onChangeText and Value it doen't works correcly.

我上传了显示错误的图像.我要写你好吗?"

I upload image that show the error. I want write "Hi, How are you?"

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

You can see the error in the following link:

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))

推荐答案

我想，您应该将大多数redux-form props.input传递给react-native <TextInput />.

I guess, you should pass most of the redux-form props.input to the react-native <TextInput />.

这是一个完整的包装，摘自

Here's a complete wrapper, taken from Easy forms in React Native with Redux Form article:

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} />

这篇关于在响应本机中的Redux Form，带有值的onChangeText不能正确工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！