Question

public function get() { $usertypes_list = User_type::lists('id', 'type'); return view('edit')->compact('user_type'); }不发送表单数据。由于某种原因，字段的配置对象似乎是handleSubmit()，即使我相信我已正确连接undefined。

LoginComponent.js

redux-form

LoginContainer.js

import { reduxForm } from 'redux-form';

import '../others/styles.css';

const FIELDS = {
  username: {
    type: 'input',
    label: 'Enter username'
  },
  password: {
    type: 'input',
    label: 'Enter password'
  }
};

const Login = (props) => {
  console.log('--------- props: ', props);

  const { fields: { username, password }, handleSubmit, setUsernameAndPassword } = props;

  console.log('-------- username: ', username); // PROBLEM: Returns undefined when it should return the config object for this field
  return (
    <div>
      <Form onSubmit={ handleSubmit(setUsernameAndPassword.bind(this)) } id='login'>
        <Form.Field>
          <label>Username</label>
          <input {...username}
            name='username' />
        </Form.Field>

....

Login.propTypes = {
  handleSubmit: React.PropTypes.func,
  fields: React.PropTypes.array,
  setUsernameAndPassword: React.PropTypes.func
};

export default reduxForm({
    form: 'LoginForm',
    fields: Object.keys(FIELDS)
})(Login);

减速器/ index.js

import { connect } from 'react-redux';
import { graphql } from 'react-apollo';

import Login from '../components/LoginComponent';
import LoginMutation from '../graphql/LoginMutation.gql';
import { types as typesAuth } from '../reducers/auth';

const gqlLogin = graphql( LoginMutation, {
  props: ({mutate}) => ({
    login: async function loginWithUsernameOrEmail(variables) {
      try {
        const result = await mutate({variables});
      } catch (err) {
        console.log('GQL Error: ', err);
      }
    }
  })
})(Login);

export default connect(
  state => ({
    isLoggedIn: state.auth.isLoggedIn
  }),
  dispatch => ({
    setUsernameAndPassword: (data) => { // PROBLEM: Why is data empty??
      console.log('--------- data: ', data);
      dispatch({
        type: typesAuth.SET_USERNAME_PASSWORD,
        payload: {
          username: data.username,
          password: data.password
        }
      });
    }
  }),
)(gqlLogin);

reducers.js

import { reducer as auth } from './auth';
import { reducer as formReducer } from 'redux-form';

export default {
  auth,
  form: formReducer
};

redux.js

// Modules
import appReducers from '../modules/root/reducers/';
import authReducers from '../modules/auth/reducers/';

module.exports = {
  ...appReducers,
  ...authReducers
};

auth.js

// Imports
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';

// Reducers
import Client from './client';
import reducers from './reducers';

const devtools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

module.exports = createStore(
  combineReducers({
    ...reducers,
    apollo: Client.reducer()
  }),
  compose(
    applyMiddleware(Client.middleware()), devtools()
  ),
);

Answer 1

您需要使用Field中的redux-form个组件将各个输入绑定到redux商店（see docs）。

redux-form文档中的

The "Simple Form" Example很好地演示了如何执行此操作，只需从Field导入redux-form组件并使用它来描述您的输入。在你的情况下，它将是这样的：

import { reduxForm, Field } from 'redux-form';

const Login = (props) => {
  console.log('--------- props: ', props);

  const { handleSubmit, isLoggingIn, setUsernameAndPassword } = props;

  return (
    <div>
      <Form onSubmit={ handleSubmit(setUsernameAndPassword.bind(this)) } id='login'>
        <Form.Field>
          <label>{i18n.t('auth.username')}</label>
          <Field
            component="input"
            name="username"
            placeholder={i18n.t('utils.and',{item1: i18n.t('auth.username'), item2: i18n.t('auth.email')})}
          />
        </Form.Field>

....

希望这有帮助！

redux-form handleSubmit不发送表单数据

1 个答案: