I have login component. Here I have used redux-form. As I am new to react, can you help to get the form data from redux-form (how to submit the form data)?
<form onSubmit={this.onSubmit}>
<div className="padding5">
<Field name="email" type="email" component={RenderField} label="Email Id" />
</div>
<div className="padding5">
<Field name="Password" type="Password" component={RenderField} label="Password" />
</div>
<div className='buttonSection'>
<button type="submit" disabled={this.state.errors} className='buttonField padding5'>Reset Password</button>
</div>
</form>
Your code looks fine.
You have to use Form from redux-form:
import { reduxForm, Form } from 'redux-form';
// Your form component
<Form onSubmit={this.onSubmit}>
// Your form
</Form>
Make sure you have add redux-form to your redux store:
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const combinedReducers = combineReducers({
form: formReducer
})
and you are exporting your form wrapped:
import { reduxForm, Form } from 'redux-form';
// Your form
export default reduxForm({
form: 'name-of-form'
})(MyForm);
First you should use Form component from redux-form
import { reduxForm, Form, Field } from 'redux-form';
Also when connected to redux-form your component receives a handleSubmit prop you should use in your onSubmit event listener so it should be :
<Form onSubmit={this.props.handleSubmit(this.onSubmit)} />
Then your submit button will do the job calling this.onSubmit with a collection of values with field names as keys :
onSubmit = values => {
console.log(values); // => { email: '', password: '' }
}
Related
In my form i want to add a textarea field with vee validation.
Unfortunately, i cannot get the field to mentioned by yup schema.
import { Form, Field, ErrorMessage, useFieldError } from "vee-validate"
import { string } from "yup"
import * as yup from "yup"
const schema = yup.object({
name: string().required("Mandatory field"),
description: string().required("Mandatory field"),
})
This is my form field (edit by last comment: i missed the "v-bind" but still not work)
<Field name="description" v-slot="{ description }">
<textarea v-bind="description" id="description" cols="30" rows="10" />
</Field>
The field is filled but the validation was not mentioned.
i followed an example here, but it not work.
Here's a full working example:
<template>
<Field v-slot="{ field, errors }" v-model="comment" name="comment" rules="required">
<textarea v-bind="field" name="comment"/>
<div v-if="errors[0]">{{errors[0]}}</div>
</Field>
</template>
<script lang="ts">
import { Field } from 'vee-validate';
import { defineRule } from 'vee-validate';
import { required } from '#vee-validate/rules';
export default {
components: { Field },
data() {
return {
comment:''
}
},
created() {
defineRule('required', required);
}
};
</script>
Things you were missing:
Rules ("required"), otherwise Vee Validate has nothing to do
v-slot errors - get the errors so you can show them
v-model on the Field (and a data element in your Vue component)
I am now practicing upload a file by using Reactjs. This is a simple problem, but I could not connect the solution to axios. I know how the state and Form works, but my JavaScript callback values does not contains any of my given input. Or I could not find my values. Here is my case.
import React, {Component, Fragment} from 'react';
import tokamakConfig from './Configuration_icon_by_obsilion.png';
import {Form} from 'semantic-ui-react';
class Advance extends Component {
handleSubmit(event, values){
console.log(event);
console.log(values);
}
render() {
return (
<Fragment>
<h1>Please provide necessary information for the operation</h1>
<img src={tokamakConfig} alt={'tokamak configuration'} />
<Form onSubmit={this.handleSubmit}>
<Form.Group inline>
<label>Load input file</label>
<input name={'file'} type='file' />
</Form.Group>
<Form.Group inline>
<label>Comment</label>
<input name={'comment'} type={'text'} placeholder={'This is an advanced mode'}/>
</Form.Group>
<button type={'submit'}>Submit</button>
</Form>
</Fragment>
)
}
}
export default Advance;
In my console.log(). I got proxy object and onSubmit object. I could not find any of my input there. Then I have no idea how can I dispatch my value to axios
Question:
How to POST file from form to endpoint
<input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
You need to use onChange event to get the file data.
handleChange(selectorFiles: FileList)
{
console.log(selectorFiles);
}
Then you need to get the file info inside the method
Was looking for years, didn't find anything worthy tho.
When I was working with flow, I could simply:
import { type FieldProps, FormProps } from 'redux-form';
Is there a similar (and that easy) way to properly set props to redux form in typescript?
Docs aren't saying anything about typescript, there's only a page for Flow typings.
However, I found that I can import something like propTypes from redux-form:
import { reduxForm, propTypes } from 'redux-form'
However - redux-form has nothing like propTypes exported, so docs are kinda deprecated.
Link: https://redux-form.com/7.2.1/docs/api/props.md/
Thanks in advance for any kind of help.
tl;dr class RegistrationForm extends React.PureComponent<any> {
what to drop here ^^^^^
You need to install the #types/redux-form package with your package manager. The #types/redux-form package includes types definitions for redux-form package.
Then you can import type definitions from redux-form, for example InjectedFormProps.
Your form that will be wrapped with reduxForm() should has props that extends InjectedFormProps<FormData = {}, P = {}>.
reduxForm() type is generic reduxForm<FormData = {}, P = {}>(...
See the example:
import * as React from 'react';
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import { IUser } from './index';
interface IProps {
message: string;
}
class UserForm extends React.Component<InjectedFormProps<IUser, IProps> & IProps> {
render() {
const { pristine, submitting, reset, handleSubmit, message } = this.props;
return (
<form onSubmit={handleSubmit}>
<div>{message}</div>
<div>
<label>First Name </label>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
<div>
<label>Last Name </label>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
}
}
export default reduxForm<IUser, IProps>({
form: 'userForm',
})(UserForm);
The source code of #types/redux-form package is located here. You can see the types there and more complicated examples in the redux-form-tests.tsx file that is used for types checking.
I'm using React.js for a project and I'm getting some troubles. Here is my problem:
I have this component which is for creating a new recipe:
import React, {Component, PropTypes} from 'react';
import { reduxForm } from 'redux-form';
import {Link} from 'react-router';
import { createRecipe } from '../actions/index';
class NewRecipe extends Component {
static contextTypes = {
router:PropTypes.object
};
onSubmit(props){
this.props.createRecipe(props).then(() => {
this.context.router.push('/yourRecipes');
});
}
render(){
const name = this.props.fields.name;
const description = this.props.fields.description;
const handleSubmit = this.props.handleSubmit;
return(
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<h3>New recipe</h3>
<div>
<label>Name</label>
<input type="text" className="form-control" {...name} />
</div>
<div>
<label>Description</label>
<input type="text" className="form-control" {...description} />
</div>
<button type="submit" className="btn btn-primary btn-primary-spacing">Submit</button>
<Link to="/yourRecipes" className="btn btn-danger btn-primary-spacing">Cancel</Link>
</form>
);
}
}
export default reduxForm({
form: 'NewRecipeForm',
fields: ['name','description']
}, null, { createRecipe })(NewRecipe);
createRecipe action creator looks like this inside index.js file:
export function createRecipe(props){
const request = axios.post('http://localhost:3001/recipes/new', props);
return {
type: CREATE_RECIPE,
payload: request
};
}
Everytime I try to click the submit button of the form I get this error in the browser console:
Uncaught TypeError: this.props.createRecipe is not a function
The error is because there is not such function defined in this react class and you are trying to access it using this.props.createRecipe.
One way is you would directly call as createRecipe() as you have the import.
One more way is you use connect from react-redux and connect this class with the state and dispatch props and then you can use this.props.createRecipe()
If you are using redux-form 6.x.x then you need to make use of connect
NewRecipe = reduxForm({
form: 'NewRecipeForm',
fields: ['name','description']
}, null)(NewRecipe);
export default(null, createRecipe)(NewRecipe);
I am making simple blog with react redux. As package I am using redux form
I made events such as post,get,delete but I couldn't form edit because I can't getting values title and body in edit. I tried to solve it with initialize in componentwillMount but it is getting error to Cannot read property 'title' of undefined when I write this.props.edit.title in ComponentWillMount
How can I solve this problem, How I can get values in edit form
import React, { Component, PropTypes } from 'react';
import * as actions from '../../actions/index';
import { connect } from 'react-redux';
import {reduxForm} from 'redux-form';
import {initialize} from 'redux-form';
class EditPost extends Component {
componentWillMount(){
this.props.dispatch(initialize('edit', { title: this.props.edit.title }, ['title', 'body']));
this.props.EditPost(this.props.params.id);
}
handleFormSubmit(formProps){
this.props.addPost(formProps);
this.context.router.push('/posts');
}
render(){
const {handleSubmit,fields:{title,body}} = this.props;
if(!this.props.edit){
return <div>Loading...</div>;
}
return (
<div>
<div className="row">
<div className="col-md-12">
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Title:</label>
<input {...title} className="form-control" />
{title.touched && title.error && <div className="text-danger">{title.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Body:</label>
<textarea {...body} className="form-control" ></textarea>
{body.touched && body.error && <div className="text-danger">{body.error}</div>}
</fieldset>
<button className="btn btn-success">Add</button>
</form>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
edit:state.posts.edit
}
}
export default reduxForm({
form:'edit',
fields:['title','body'],},mapStateToProps,actions)(EditPost);
I solved problem in following way. I can get the post values with initialValues: state.posts.edit
function mapStateToProps(state) {
return {
edit:state.posts.edit,
initialValues: state.posts.edit
}
}