Redux-Form V6 - 我无法访问反应原生的道具

Question

我不明白如何访问表单道具。我使用formValueSelector作为文档的建议，但不起作用。我的错误在哪里？我正在使用最新版本的redux-form。

LoginForm.js

'use strict';

import React from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { TextInput, View, TouchableHighlight, Text } from 'react-native';
import { connect } from 'react-redux';

class LoginForm extends React.Component {

    handeSubmit(email, password){ alert(`email: ${email} and password: ${password}`)};

    render() {

        return (
            <View>
                <Field
                    name="email"
                    component={TextInput}
                    placeholder="Email"
                />
                <Field
                    name="password"
                    component={TextInput}
                    placeholder="Password"
                    secureTextEntry={true}

                />
                <TouchableHighlight onPress={() => this.handeSubmit(this.props.email, this.props.password)}>
                    <Text>Submit</Text>
                </TouchableHighlight>
            </View>
        );
    }
}


LoginForm = reduxForm({
    form: 'loginForm'
})(LoginForm);

const selector = formValueSelector('loginForm');

function mapStateToProps(state){
    return {
        email: selector(state, 'email'),
        password: selector(state, 'password'),
    }
}

LoginForm = connect(mapStateToProps)(LoginForm);

export default LoginForm;

LoginPage.js

'use strict';

import React from 'react';
import {View} from 'react-native';
import Container from '../../components/Container';
import LoginForm from '../../components/forms/LoginForm';

class LoginPage extends React.Component {
  render() {
    return (
        <Container>
            <LoginForm/>
          </Container>
    );
  }
}



export default LoginPage;

结果：

我使用alert(this.props) onPress按钮，这是输出。没有email和password。

这是

的输出

<TouchableHighlight onPress={() => alert(JSON.stringify(test))}>
                    <Text>Submit</Text>
 </TouchableHighlight>


function mapStateToProps(state){
    return {
        test: state.form.loginForm
    }
}

Answer 1

I found the solution. TextInput doesn't work with redux-form as it is. It need a component than pass the redux-form props like this:

TextField.js

class TextField extends React.Component {
      render(){
        const { input: { value, onChange } } = this.props; <----add this!!!
        return (
                <TextInput
                    style={[styles.textInput]}
                    onChangeText={(value) => onChange(value)} <----add this!!!
    add this!!!---> value={value} underlineColorAndroid="transparent" selectTextOnFocus={true} {...this.props}
                />
        );
    }
}

Instead of import TextInput inside the forms, import the custom TextField.