फॉर्मिक और रिएक्ट हुक के लिए अभी भी नया है।

यहाँ प्रतिक्रिया में मेरा कोड है।

// react
import React, { useEffect } from 'react';
import { withFormik } from 'formik';
import { useDispatch } from 'redux-react-hook';
import { takeEvery, call, put } from 'redux-saga/effects';

// row, col, field, input, buttonGroup
import {
    Row,
    Col,
    FieldWrapper,
    Input,
    ButtonGroup
} from 'some-tool';

const searchTypeOption = [
    ....
];

const SearchForm = (props: any) => {
    const {
      values,
      touched,
      errors,
      handleChange,
      handleSubmit,
    } = props;

    return (
        <form onSubmit={handleSubmit}>
            <Row>
                <Col md="3">
                    <FieldWrapper required={true}>
                        <Select name="searchKey" onChange={handleChange} value={values.searchKey} options={searchTypeOption} />
                    </FieldWrapper>
                    {errors.searchKey && touched.searchKey && <div>{errors.searchKey}</div>}
                </Col>
                <Col md="5">
                    <FieldWrapper>
                        <Input
                            placeholder="Search"
                            type="text"
                            onChange={handleChange}
                            value={values.searchValue}
                            name="searchValue"
                        />
                    </FieldWrapper>
                    {errors.searchValue && touched.searchValue && <div>{errors.searchValue}</div>}
                </Col>
            </Row>

            <Row>
                <ButtonGroup>
                    <Button>Clear</Button>
                    <Button type="submit">Search</Button>
                </ButtonGroup>
            </Row>
        </form>
    );
  };

  export const Search = withFormik({
    mapPropsToValues: () => ({ searchKey: '', searchValue: '' }),

    // Custom sync validation
    validate: values => {
      let errors = {};


      //if (values.hasOwnProperty('searchKey') && !values.searchKey) {
      //  errors.searchKey = 'Required';
      //}


      return errors;
    },

    handleSubmit: (values, { props, setSubmitting }) => {
        const payload = {
            searchKey: values.searchKey,
            searchValue: values.searchValue
        };

        // NOTE: obj.props is empty.....
        console.log(obj);

        // How to use dispatch here or some way to fire event
        dispatch({ type: 'SEARCH_DOCS', payload: payload });
    },
  })(SearchForm);

handleSubmit में, मैं किसी ईवेंट को कैसे भेजूं, ताकि गाथा और रेडक्स उन्हें प्राप्त कर सकें?

2
kenpeter 17 जुलाई 2019, 15:18

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा करने के लिए आपको एक कनेक्टेड घटक पास करना होगा ताकि आपके पास प्रेषण तक पहुंच हो सके

इसे फॉर्मिक के साथ लपेटें जैसे आप करते हैं

const SearchFormFormik = withFormik(SearchForm) 

फिर इसे redux . से कनेक्ट करें

const mapDispatchToProps = {
  searchDocFun,
};

const ConnectedSearchForm = connect(
  null,
  mapDispatchToProps
)(SearchFormFormik);

फिर आप हैंडल सबमिट पर searchDocFun का उपयोग कर सकते हैं

handleSubmit: (values, { props, setSubmitting }) => {
        props.searchDocFun(values)
    }
3
Panagiotis Vrs 17 जुलाई 2019, 12:45