Форма Redux HandleSubmit в React Native не работает (без вывода значений) - PullRequest
Новая
       40

Форма Redux HandleSubmit в React Native не работает (без вывода значений)

0 голосов
/ 25 января 2019

Я использую Redux Form для сбора информации о пользователе. Я связал Redux Form с хранилищем и написал форму в соответствии с инструкциями, но при нажатии кнопки «Отправить» значения не передаются.

Обычно я не спрашиваю о переполнении стека, поэтому прошу прощения за мою неверную формулировку. Я не знаю, как сформулировать свою проблему.

Я скопировал свой код на закусочную (ссылка: https://snack.expo.io/S1_6f7dQV)

Вот мои коды: Компоненты / 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;

Компонентный / 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;

Экран / 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>
    );
  }
}

ScreenShot

1 Ответ

0 голосов
/ 25 января 2019

Попробуйте включить input реквизиты для вас TextInput, как показано ниже, как показано в примере здесь на Документах ReduxForm 

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