redux-form

问题 In my react component I am trying to set a field called 'total'. I have imported the change action as a prop into my component: import React, { Component, Fragment } from 'react' import { Field, FieldArray, reduxForm, getFormValues, change } from 'redux-form' import { connect } from 'react-redux' import { CalcTotal } from './calculationHelper'; const renderField = ({ input, label, type, meta: { touched, error } }) => ( <div> <label>{label}</label> <div> <input {...input} type={type}

问题 Backgrond: I am creating a Login component. saga.js is composed by 3 functions 1. rootSaga . It will execute the list of sagas inside 2. watchSubmitBtn . It will watch the click on the submit button and dispatch an action. 3. shootApiTokenAuth will receive dispatched action and process axios.post the return value is promise object In action: Backend returns 400 to the React . This case no problem I can read the payload and display in the render() easily. But when 200 is returned. I need to

问题 I'm using redux-form and it provides a built-in reducer, called "formReducer" that need to be registered with the combined reducers to manage the form state with redux's store. I'm also using redux-persist to persist the redux store. The problem raised when I don't want to have my form automatically re-populate the data entered by the user on page reloading or page refreshing. In a normal reducer written by my own, I can simply add an switch case for action of type "REHYDRATE" (dispatched by

问题 I am working on react-select library and facing some issues, I am using redux-form library and importing <Field /> component from it. So that I can submit the values via form to service. Below mentioned code works fine, when I use default <Select> from react-select. I can able to select the values from the drop down and the value will be selected even on focus out the value will remain. But selected value is not submitting via form due to redux-form that's why I am wrapping <Select />

问题 I believe in any application there should be one source of truth. My app will be having 90+ transaction forms and 150 reports Complex data structures (parent level, child level, computations) So in React I found three confusing places to store state: Component state - use when we don't want to share data Redux custom store (managed by developer) - use when we want to share data Redux-form store (managed by redux-form) - use for validation I started using redux form just for validation , and

问题 I am having some trouble trying to render a simple material-ui-next checkbox inside a redux-form . I am following the official example and trying to adapt it to the material-ui-next equivalent, since the example is using the older version of material-ui . This is the code that I end up using: const renderCheckbox = ({ input, label }) => ( <FormGroup row> <FormControlLabel control={ <Checkbox checked={input.value ? true : false} onChange={input.onChange} value="checkedA" /> } label="Secondary"

问题 I have a form setup with redux-form and basically want to create a scenario where if there's content filled in any of the form's inputs and you try to navigate away from the page you get a prompt. The intent is to cancel the page unmount or page nav if they click Cancel . I tried creating a conditional, that if fulfilled would just return but it still navigates away from the current page. This is probably natural and that I'm not privy to the react/react-router workflow just yet but for the

问题 So I need to mask a SSN# input field, lets say the ssn is 123-45-6789 , I need to display ***-**-6789 (real time as they enter each digit) but I still need to retain the original value to submit. I got to the point where I can do that if the user strictly enters the value but it breaks if the user does anything else such as delete, or moving cursor to a random position and adds/deletes a number, copy pasting/deleting, etc. I really don't want to listen to a bunch of events to make this work

问题 I'm using "revalidate" to validate "redux-form" forms, but I'm facing this situation where there's a form that is generated dynamically based on an API response that I map over it and display the inputs inside the form. Here's an example of how I normally validate "redux forms" with "revalidate ... const validate = combineValidators({ name: composeValidators( isRequired({ message: "Please enter your full name." }), hasLengthLessThan(255)({ message: "Name can't exceed 255 characters." }) )(),

问题 I'm looking to learn how to dynamically build a redux-form. Idea being, the component called, componentDidMount goes at fetches a list of items from the server and inserts them in the store, store.my_items: {'item1', 'itemB', 'itemZZZ', etc...} Now that these items are in the store, I want to build the redux-form with a Field for each item in store.my_items. Example, several of these dynamically created: <div> <label>ItemXXX</label> <div> <label> <Field name="ItemXXX" component="input" type=