redux-form

问题 I'm trying to map a redux-form's initialValues property so that the form can be pre-populated (this is a user profile edit screen that is populated from an external API). Because the validation of what fields the user is allowed to manage occurs on the API, the React JS frontend needs to be as dynamic as possible when it comes to populating the initial values. I did find another question here on SO that addressed dynamically pre-populating initialValues (Dynamically load initialValues in

问题 I have a redux-form component which gets initialValues from the redux store in the first load and populates the form. The form is still not submitted. (it was submitted previously but we are in new state from scratch after a user browser reload). The initial Values are populated properly. let CheckoutStep1Form = (props) => { return( //my fancy form ) } CheckoutStep1Form = reduxForm({ form: 'step1', // a unique name for this form })(CheckoutStep1Form); CheckoutStep1Form = connect( state => ({

问题 How can I redirect to another page after submitting a form? What code is needed to add my code?? This is my code simple.js import React from 'react'; import { Field, reduxForm } from 'redux-form'; const SimpleForm = props => { const { handleSubmit, pristine, reset, submitting } = props; return ( <form onSubmit={handleSubmit}> <div> <label>First Name</label> <div> <Field name="firstName" component="input" type="text" placeholder="First Name" required /> </div> </div> <div> <label>Last Name<

问题 I'm pretty new to React & Redux-Form and at the moment I am in need of some help. Basically I have listing page with lists and their edit button. When the edit is clicked, I am showing a modal pop up with the fields and doing a API call to fetch the respective list data. Could you please let me know how can I pre-populate the fields in the modal pop up with the data received from API call? A demonstration with a code sample will be much appreciated(like I said I am pretty new to React & Redux

问题 this is a suppliment question of this question. What I am trying to do: I have a button that gets my current location on click. This button should also fill the <Field> component with values, so that I can submit it later. What's happening: My Field component is unaware of any changes, so I can't submit the value. the redux state isn't being populated and I think it is happening because the Field onchange event isn't being triggered. I tried setting the state directly to onChange , but it isn

问题 I want to define a HOC(higher order Component) which will be responsible for handling the functionality. import React, { Component } from 'react'; const NextFieldOnEnter = WrappedContainer => class extends Component { componentDidMount() { console.log('hoc', this.refs); //move to next input field } render() { return <WrappedContainer {...this.props} />; } }; export default NextFieldOnEnter; It says this.refs is deprecated . So how can I achieve tab like behavior when enter key is pressed. My

问题 Why does my redux-form not submit when I have more than one field? If I have more than one field then the onSubmit on my form does not run. The following code will not show the alert : //@flow import * as React from 'react'; import {Field, reduxForm, Form} from 'redux-form'; class CustomerPage2 extends React.Component { constructor(props) { super(props); } render() { let submit = () => alert("show me the money") return ( <Form id="myform" onSubmit={submit} > <Field label={'asdf'} className={

问题 I have written code, which uses a Modal dialog to display a form. My react app is rendered at "root" index.html <div id="root"></div> App.js const store = configureStore(); ReactDOM.render( <Provider store={store}> <ExampleBasic/> </Provider> , document.getElementById('root')); ExmpleBasic.js Please ignore state management in component here. this is just for example. import React, { PureComponent } from 'react'; import Lorem from 'react-lorem-component'; import Modal from '@atlaskit/modal

问题 Entire examples doesn't show simple solution how to keep submit button disabled until all fields is filled up in redux-form. I tried to use this approach (TypeScript): import * as React from 'react'; import * as reduxForm from 'redux-form'; export interface Props extends reduxForm.InjectedFormProps {} let passedUsername = false; let passedPassword = false; const required = (value: string, callback: (passed: boolean) => void) => { console.info(`PERFORM REQUIRED FIELD CHECK FOR ${value}`); if

问题 I have a couple fields in my component, most of which are explicitly named. However, I have a button that dynamically adds tickets with an id, for example ticket1 , ticket2 , etc. These tickets are stored in an array and available via this.props In my validate function, however, I am not sure how to reference/loop through the list of tickets and run any validations, mainly because I am not sure how to pass down these updated field values to the validate function. on page load, it takes the