Redux-Form V6 - 我无法访问 react-native 中的表单道具

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

我找到了解决方案。 TextInput 不适用于 redux-form。它需要一个组件而不是像这样传递 redux-form 道具：

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

不要在表单中导入 TextInput，而是导入自定义 TextField。

Redux-Form V6 - 我无法访问 react-native 中的表单道具

Redux-Form V6 - I can't access to form props in react-native

javascript

reactjs

react-native

redux-form

react-redux