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) on按鈕，這是輸出。沒有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形式的道具是這樣的：

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的，導入自定義文本字段。