React Native 中的 HandleSubmit Redux 表单不起作用（无值打印）

Question

我正在使用 Redux 表单来捕获用户信息提交。我已经将 Redux Form 与商店连接起来并根据说明编写了表单，但是当单击提交按钮时，没有传递任何值。

我通常不会在 Stack Overflow 上提问，所以请原谅我措辞不当。我不知道如何表达我的问题。

我将我的代码复制到零食博览会上 (link: https://snack.expo.io/S1_6f7dQV)

这是我的代码： Components/Form.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';

const renderField = ({ label, keyboardType, name }) => {
    return (
      <View>
        <Text>{label}</Text>
        <TextInput  keyboardType={keyboardType}
        >
        </TextInput>
    </View>
    );
};

const submit = values => { 
    alert(`here is the value ${JSON.stringify(values)}`)
}
const ContactComponent = props => {
    const { handleSubmit } = props;
    console.log('handle submit ...');
    console.log(handleSubmit);
    return (
        <View>
            <Text>Redux-form example</Text>
            <Field keyboardType="default" label="Username: " component={renderField} name="Username" />
            <Field keyboardType="email-address" label="Email: " component={renderField} name="Email" />
            <TouchableOpacity onPress={handleSubmit(submit)} style={{ margin: 10, alignItems: 'center' }}>
                <Text>Submit</Text>
            </TouchableOpacity>
        </View>
    );
}

const ContactForm = reduxForm({
    form: 'contact', // a unique identifier for this form
})(ContactComponent);

export default ContactForm;

Component/MainComponent.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import React, { Component } from 'react';
import { View, Icon} from 'native-base';

const MainNavigator = createStackNavigator({
  Home: { screen: HomeScreen }
  // AddTransaction: { screen: AddTransaction },
  // TransactionList: { screen: TransactionList }
})

const Main = createAppContainer(MainNavigator);
export default Main;

Screen/HomeScreen.js

import React, {Component} from 'react';
import { Container, View, Text, Content, Button, Form } from 'native-base';
import ContactForm from '../components/Form.js';

class HomeScreen extends Component {

  static navigationOptions = { 
    title: 'Home',
  }

  render() {   
    return (
      <Container>
          <ContactForm/>
      </Container>
    );
  }
}

export default HomeScreen;

App.js

import React from 'react';
import { View, Text } from 'native-base';
import Main from './components/MainComponent';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createLogger } from 'redux-logger';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer, 
});
export const store = createStore(rootReducer)

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

Answer 1

尝试将 input 属性添加到您的 TextInput 中，如下所示，如 ReduxForm's docs

上的示例所示

const renderField = ({ label, keyboardType, name, input }) => {
    return (
      <View>
        <Text>{label}</Text>
        <TextInput  keyboardType={keyboardType} {...input}
        >
        </TextInput>
    </View>
    );
};

React Native 中的 HandleSubmit Redux 表单不起作用（无值打印）

HandleSubmit Redux Form in React Native doesn't work (No Values Print Out)

javascript

reactjs

react-native

redux

redux-form