Question

我想在我的redux-form静态网站生成器中使用gatsby.js，但当我尝试在input中输入内容时，不会输入任何内容。

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createSession } from '../_actions';

class Login extends Component {
  renderField(field) { 
    const { meta: { touched, error } } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`

    return (
      <div className={className}>
        <label>{field.label}</label>

        <input
          className="form-control"
          type="text"
          {...field.input}
        />

        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div> 
    )
  }

  onSubmit(values) {
    this.props.createSession(values);
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <div className="container">
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            label = "Email"
            name="email"
            type="email"
            component={this.renderField}
          />
          <Field
            label = "Password"
            name='password'
            type="password"
            component={this.renderField}
          />
          <button type="submit" className="btn btn-success">Submit</button>
          <Link to="/" className="btn btn-danger">Cancel</Link>
        </form>
      </div>
    );

  }
}


export default reduxForm({ 
  form: 'SessionsNewForm'
})(
  connect(null, { createSession })(Login)
);

我已将formReducer传递给reducers index.js文件中的combinedReducer调用：

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form/immutable';

const rootReducer = combineReducers({
  form: formReducer
});

export default rootReducer;

我想知道这是redux-form和gatsby.js之间的问题，因为我能够在创建反应应用中使用它。我知道盖茨比在引擎盖下有减速机，＆＃34;但是我想为表单提交做一些redux-customizing。

我注意到当我更换......

<input
  className="form-control"
  type="text"
  {...field.input}
/>

...与...

<input {...field} 
  className="form-control"
  onChange={event => {
    field.onChange(event)
  }}
/>

...我实际上可以在输入中键入文本，但是当我按下提交时，则没有值传递给onSubmit方法。

Answer 1

我不确定您使用的是哪个Reduxform版本。但这对我有用

import { combineReducers } from 'redux';
import { reducer as reduxFormReducer } from "redux-form"; //  "redux-form": "^8.2.0",
import user from './user';
import profileRegistration from './profileRegistration';

export default combineReducers({
    form: reduxFormReducer, 
    profileRegistration,
    user,
});

redux-form无法使用gatsby.js上的登录表单

1 个答案: