Блог

я хочу использовать весь обработчик событий redux-form как показано в том же выходном изображении, но он не отображается в качестве реквизита, поэтому я столкнулся с ошибкой undefine, что я могу сделать, чтобы решить проблему

я импортировал редукторы в index.js файл папки src и создать хранилище

package.json

  {
  "name": "reactjs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.2.0",
    "react-transition-group": "^4.4.1",
    "redux-form": "^8.3.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}
  

reducers/index.js

  import { reducer } from 'redux-form';
import { combineReducers } from "redux";

export default combineReducers({
    reducer

})
  

TouristRegistration.js

     import React, { Component } from 'react';
    import { reduxForm, Field } from "redux-form";
    import { Button } from "@material-ui/core"
    import RegistrationField from "./ReaperComponent"

    class TutiorsRegistrationForm extends Component {
    handlenextpage = () => {

        this.props.nextPage()
    }
    render() {
        return (
            <form>
                <Field
                    type="text"
                    name="FirstName"
                    component={RegistrationField}
                />
                <Button
                    color="primary"
                    variant="contained"
                    type="submit"
                >Next
                </Button>
            </form>
        );
    }
}

const validate = (value) => {
    const errors = {}
    if (!value.FirstName) {
        errors.FirstName = "Required"
    }
    console.log("error "   JSON.stringify(errors));




    return errors;

}

export default reduxForm({
    validate: validate,
    form: 'TutiorsRegistrationForm'

})(TutiorsRegistrationForm);
  

RegistrationField.js

  import React from 'react';
import { TextField } from "@material-ui/core"

const ReaperComponent = (props) => {

    console.log("props "   JSON.stringify(props));
    return (

        <TextField />

    );
}

export default ReaperComponent;
  

вывод
инструктора

вывод в моем случае

 props {"input":{"name":"FirstName","value":""},"meta":{"active":false,"asyncValidating":false,"autofilled":false,"dirty":false,"form":"TutiorsRegistrationForm","invalid":false,"pristine":true,"submitting":false,"submitFailed":false,"touched":false,"valid":true,"visited":false}}