Question

我是新人的反应。现在，如果我试图在输入字段中输入值，但是无法显示阻止。也没有验证发生。任何建议将不胜感激。如果您需要更多信息，请随时询问。

package.js文件

"dependencies": {
    "axios": "^0.17.1",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-form": "^7.1.2",
    "redux-thunk": "^2.2.0"
  }

减速器/ index.js

import {combineReducers} from 'redux';
import {reducer as formReducer} from 'redux-form';
const rootReducer = combineReducers({
    form: formReducer
});

export default rootReducer;

根/ index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import {BrowserRouter, Route} from 'react-router-dom';
import reduxThunk from 'redux-thunk';

import reducers from './reducers';

import App from './components/app';
import Header from './components/main/header';
import Footer from './components/main/footer';
import Dashboard from './components/main/dashboard';
import Signin from './components/auth/signin';
import Signup from './components/auth/signup';
import About from './components/main/about';
import Contact from './components/main/contact';
import { reducer } from 'redux-form';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

ReactDOM.render(    
        <Provider store={createStoreWithMiddleware(reducer)}>
            <BrowserRouter>
                <div className="container">
                    <Header />
                    <Route path="/" component={App} />
                    <Route exact path="/" component={Dashboard} />
                    <Route path="/signin" component={Signin} />
                    <Route path="/signup" component={Signup} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                    <Footer />
                </div>
            </BrowserRouter>
        </Provider>
,document.getElementById('root')
);

组件/ signin.js

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

class Signin extends Component{

    renderCommonInputField(field){
        return(
            <div className="form-group">
                <label>{field.label}</label>
                <input
                    className="form-control"
                    type={field.type}
                    placeholder={field.placeholder} 
                    {...field.input}
                />
            </div>
        );
    }

    onFormSubmit(values){
        console.log('test');

        event.preventDefault();
    }
    render(){
        const {handleSubmit} = this.props;
        return(
            <div>
                <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
                    <Field 
                        label="Enter your email"
                        name="email"
                        type="text"
                        placeholder="enter email ex@..example@empl.com"
                        component={this.renderCommonInputField}
                    />
                    <Field 
                        label="Enter your password"
                        name="password"
                        type="password"
                        placeholder="enter your password"
                        component={this.renderCommonInputField}
                    />                    
                    <button type="submit" className="btn btn-default">Submit</button>
                </form>
            </div>
        );
    }
}
function validate(values){
    const errors = {}
    if(!values.email){
        errors.email = "Email is required"
    }
    if(!values.password){
        errors.password = "Password is required"
    }
    return errors;
}
export default reduxForm({
    form: 'signinform',
    validate
})(Signin);

Answer 1

更新：

在index.js上调用createStoreWithMiddleware时，您的问题有点错误。参数应该是reducer s 而不是reducer。

替换：<Provider store={createStoreWithMiddleware(reducer)}>。

通过：<Provider store={createStoreWithMiddleware(reducers)}>

Redux表单验证无效

1 个答案: