In ReactJS would like to have a component from a function, and send a call to a function when a form is posted.
This example doesn't work. How can be fixed?
import React from 'react';
import Link from "react-router-dom/Link";
function AddPhoto(props) {
return (<div>
<h1>Pickture</h1>
<Link className='cancelIcon' to="/"> </Link>
<div>
<form className="form" onSubmit={e => this.handleSubmit(e)}>
<input className='.form input' type='text' placeholder='Link' name='link'/>
<input className='.form input' type='text' placeholder='Description' name='description'/>
<button> post</button>
</form>
</div>
</div>)
}
export function handleSubmit(event) {
console.log("Form has been submitted");
console.log(event.target.element.link.value);
}
I think there are several issues with your code.
You probably want to export your AddPhoto component instead of your handleSubmit function. Assuming that your file is only exporting your AddPhoto component, you don't have to declare a constant and you can straightaway export default your AddPhoto function.
I actually don't see the reason to export your handleSubmit function. So I will include that function inside your AddPhoto component.
There is a - in your this.handleSubmit function, also functional component don't have to use this, furthermore your handleSubmit function is not within your functional component's scope. So it won't work.
You probably don't need the . in your input className props as well.
I've formatted your code to make it look cleaner :)
Here are the codes for you to refer.
const AddPhoto = (props) => {
const handleSubmit = (event) => {
// Add this if you want to prevent the page from reloading and updating your url
event.preventDefault();
console.log("Form has been submitted");
// Assuming you want to get the `link` field's value, you can get it by using this
console.log(event.target.link.value);
}
return (
<div>
<h1>Pickture</h1>
<Link className="cancelIcon" to="/">
{" "}
</Link>
<div>
<form className="form" onSubmit={handleSubmit}>
<input
className="form input"
type="text"
placeholder="Link"
name="link"
/>
<input
className="form input"
type="text"
placeholder="Description"
name="description"
/>
<button type="submit">post</button>
</form>
</div>
</div>
);
}
export default AddPhoto;
Remove this from your handleSubmit since it's declared outside.
Remove export if you're declaring the function in the same file. Otherwise, you would have to define your function in a separate file and then import from there.
function AddPhoto(props) {
return (<div>
<h1>Pickture</h1>
<Link className='cancelIcon' to="/"> </Link>
<div>
{/* Removed this.*/}
<form className="form" onSubmit={e => handleSubmit(e)}>
<input className='.form input' type='text' placeholder='Link' name='link'/>
<input className='.form input' type='text' placeholder='Description' name='description'/>
<button> post</button>
</form>
</div>
</div>)
}
// Removed export
function handleSubmit(event) {
console.log("Form has been submitted");
console.log(event.target.element.link.value);
}
There are quite some issue with your code:
The button doesn’t have a type=“submit” on it, so therefor it won’t even submit the form when pressed.
HandleSubmit is an function specific to AddPhoto, so it should be inside the AddPhoto component. (I also like to use an arrow function in this case because it should be an anonymous function).
There is no need the use this because first of all this keyword is only used in classes to bind functions to the class. So because AddPhoto is an functional component, you don’t have to bind the function to the class.
You should add event.preventDefault();, because otherwise the page will reload (to submit the form) and you will lose your state of your application.
import React from 'react';
import Link from 'react-router-dom/Link';
export default function AddPhoto() {
const handleSubmit = event => {
event.preventDefault();
const link = event.target.link;
const description = event.target.description;
console.log('Form has been submitted');
};
return (
<div>
<h1>Picture</h1>
<Link className="cancelIcon" to="/">
cancel
</Link>
<div>
<form className="form" onSubmit={handleSubmit}>
<input
className="form-input"
type="text"
placeholder="Link"
name="link"
ref={linkInput}
/>
<input
className="form-input"
type="text"
placeholder="Description"
name="description"
ref={descriptionInput}
/>
<button type="submit">post</button>
</form>
</div>
</div>
);
}
Try this:
import React from 'react';
import Link from "react-router-dom/Link";
export function AddPhoto(props) {
return (<div>
<h1>Pickture</h1>
<Link className='cancelIcon' to="/"> </Link>
<div>
<form className="form" onSubmit={handleSubmit}>
<input className='.form input' type='text' placeholder='Link' name='link'/>
<input className='.form input' type='text' placeholder='Description' name='description'/>
<button> post</button>
</form>
</div>
</div>)
}
function handleSubmit(event) {
console.log("Form has been submitted");
console.log(event.target.element.link.value);
}
I think you should be needing to write something like ...
import React from 'react';
import Link from "react-router-dom/Link";
export const AddPhoto = props => {
const handleSubmit = e =>{
return(
console.log("Form has been submitted");
console.log(e.target.element.link.value);
)
}
return (<div>
<h1>Pickture</h1>
<Link className='cancelIcon' to="/"> </Link>
<div>
<form className="form" onSubmit={e => handleSubmit(e)}>
<input className='.form input' type='text' placeholder='Link' name='link'/>
<input className='.form input' type='text' placeholder='Description' name='description'/>
<button> post</button>
</form>
</div>
</div>)
}
AddPhoto.defaultProps = {
onSubmit: ()=>{}
}
Related
In the browser returns the input in the list when I placed, but in the same second disappears. Until the end of the function the array is fulfill, when refresh the response the array "does" is empty.
Something is wrong and the state is not storing.
import React,{useState} from 'react';
import './App.css';
function App() {
const [text1,setText1] = useState('');
const [does,setDoes] = useState([]);
function addTodo(){
return setDoes([...does,text1]);
}
return (
<div>
<h1>To do List!</h1>
<form onSubmit={addTodo}>
<input type="text" name='text1' id='text1' placeholder='To do' onChange={(e)=>setText1(e.target.value)}/>
<button type="submit" className="submitButton">Add</button>
</form>
<ul className='todoo'>
{does.map(item => <li key={item.toString()}>{item}</li>)}
</ul>
</div>
);
}
export default App;
I expect to storage the tasks...
To not disappear when you place a text and click add use e.preventDefault()
Like this:
function App() {
const [text1, setText1] = useState("");
const [does, setDoes] = useState([]);
const addTodo = (e) => {
e.preventDefault();
return setDoes([...does, text1]);
};
return (
<div>
<h1>To do List!</h1>
<form onSubmit={(e) => addTodo(e)}>
<input
type="text"
name="text1"
id="text1"
placeholder="To do"
onChange={(e) => setText1(e.target.value)}
/>
<button
type="submit"
className="submitButton"
>
Add
</button>
</form>
<ul className="todoo">
{does.map((item) => (
<li key={item.toString()}>{item}</li>
))}
</ul>
</div>
);
}
export default App;
and if you want to keep the data in the page when you refresh it you can either use an api to store the data to a database or to use localStorage.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
As you have used the form, the page refreshed when you click the submit button. Instead of a form, you can use a div and handle the event with the click of the submit button. So you can do it this way:
...
<h1>To do List!</h1>
<div>
<input
type="text"
name="text1"
id="text1"
placeholder="To do"
onChange={(e) => setText1(e.target.value)}
/>
<button type="submit" className="submitButton" onClick={addTodo}>
Add
</button>
</div>
...
I hope you will be able to help me with an answer to my question. I am using react-modal and inside the modal I have an input where users can write an email. When writing the email it should update the state but that is not happening.
What is happening right now is that the model re-renders every time I write a new letter and that results in the state only updating with the first letter I typed and then focus is lost.
I am using react hooks. I know that changes a bit.
My code looks like the following:
import React, { useState, useContext } from 'react';
import AppContext from '../../AppContext.jsx';
import GroupContext from './GroupContext.jsx';
import Section from '../../Elements/PageContent/Section.jsx';
import PageTitle from '../../Elements/PageContent/PageTitle.jsx';
import WhiteContainer from '../../Elements/PageContent/WhiteContainer.jsx';
import { Form, FormGroup, FormSection, FormSection_Split, Label, Input, Select, Submit } from '../../Elements/Forms/FormCollection.jsx';
import { MusicGenres } from '../../Elements/Forms/MusicGenres.jsx';
import { Years } from '../../Elements/Forms/Years.jsx';
import { H3 } from '../../Elements/Fonts/FontCollection.jsx';
import { Icon } from '../../Elements/Image/ImageUtil.jsx';
import ReactModal from "react-modal";
import { useModal } from "react-modal-hook";
export default function Groups(props) {
const AC = useContext(AppContext);
const GC = useContext(GroupContext);
const [groupName, setGroupName] = useState("");
const [groupDescription, setGroupDescription] = useState("");
const [memberEmail, setMemberEmail] = useState("");
const [groupMembers, setGroupMembers] = useState([]);
const [showModal, hideModal] = useModal(() => (
<ReactModal className="DialogPopup" isOpen ariaHideApp={false}>
<Form>
<FormGroup>
<FormSection>
<Label htmlFor="memberEmail" title="Email of your group member:" />
<Input type="email" name="memberEmail" value={memberEmail} onChange={(e) => setMemberEmail(e.target.value)} placeholder="#" />
</FormSection>
</FormGroup>
</Form>
<button onClick={(e) => hideModal()} className="Close" aria-label="Close popup"><Icon iconClass="fal fa-times" /></button>
</ReactModal>
), []);
async function addObjectToGroupMembersArray(e) {
e.preventDefault();
console.log("Adding member");
}
return (
<React.Fragment>
<PageTitle title="Add group" />
<Section>
<Form>
<FormGroup>
<FormSection>
<WhiteContainer>
<Label htmlFor="groupName" title="Group name:" />
<Input type="text" name="groupName" value={groupName} onChange={(e) => setGroupName(e.target.value)} maxLength="60" required />
<span className="CharactersLeft">Characters left: {60 - groupName.length}</span>
</WhiteContainer>
</FormSection>
<FormSection>
<WhiteContainer>
<Label htmlFor="groupDescription" title="Describe your group:" />
<textarea name="groupDescription" id="groupDescription" value={groupDescription} onChange={(e) => setGroupDescription(e.target.value)} maxLength="500"></textarea>
<span className="CharactersLeft">Characters left: {500 - groupDescription.length}</span>
</WhiteContainer>
</FormSection>
<FormSection>
<WhiteContainer>
<Label htmlFor="groupMembers" title="List the emails of your group members?" />
<a href="#" className="AddLink" aria-label="Add member" title="Click to add a member" onClick={(e) => { e.preventDefault(); showModal(); }}>
<Icon iconClass="fal fa-plus" />
</a>
</WhiteContainer>
</FormSection>
<FormSection className="FormSection--Submit">
<Submit text="Create group" />
</FormSection>
</FormGroup>
</Form>
</Section>
</React.Fragment>
);
}
Does anyone of you know why the modal is updating every time I type, resulting in not being able to write anything in the input. Should i use "ref" and if I should, how would I do that?
The onChange method I am using is always working, just not inside react-modal.
I finally figured it out. It's because modal is working a little like the useEffect hook. If i add memberEmail to the bottom of the modal state, then it is working.
const [memberEmail, setMemberEmail] = useState("");
const [showModal, hideModal] = useModal(() => (
<ReactModal className="DialogPopup" isOpen ariaHideApp={false}>
<Form>
<FormGroup>
<FormSection>
<Label htmlFor="memberEmail" title="Email of your group member:" />
<Input type="email" name="memberEmail" value={memberEmail} onChange={(e) => setMemberEmail(e.target.value)} placeholder="#" />
</FormSection>
</FormGroup>
</Form>
<button onClick={(e) => hideModal()} className="Close" aria-label="Close popup"><Icon iconClass="fal fa-times" /></button>
</ReactModal>
), [memberEmail]);
What about creating an external function that you would call in onChange?
something like:
const handleOnChange = (event) => {
setMemberEmail(event.target.value);
}
// then call it in your component
<Input type="email" name="memberEmail" value={memberEmail} onChange={handleOnChange} placeholder="#" />
I'm a beginner in React and I was following a tutorial on how to create a React app with Django backend.In the video he uses Ant Design Components v3(that was the latest when the video was made). Now I'm using the latest one v4 and they changed the form onSubmit to onFinish. After some research in the comments, people posted about the update and how to make it work but no luck.The problem is that I'm trying to get the data from the form inputs(title and content) and it shows undefined.Any ideas?
Here is the component:
import React, { Component } from "react";
import { Form, Input, Button } from "antd";
const FormItem = Form.Item;
class CustomForm extends Component {
handleFormSubmit = (values) => {
const title = values.title;
const content = values.content;
console.log(title, content, values);
};
render() {
return (
<div>
<Form onFinish={(values) => this.handleFormSubmit(values)}>
<FormItem label="Title">
<Input name="title" placeholder="Article Content" />
</FormItem>
<FormItem label="Content">
<Input
name="content"
placeholder="Enter Article Content"
/>
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit">
Submit
</Button>
</FormItem>
</Form>
</div>
);
}
}
export default CustomForm;
And the output of the console.log() is:
undefined, undefined, {}
It's because Form.Item or, in your case, FormItem, must have a name prop which is missing so values are not being saved against that key, so e.g.
Change this:
<FormItem label="Title">
<Input name="title" placeholder="Article Content" />
</FormItem>
To
<FormItem label="Title" name="title">
<Input placeholder="Article Content" />
</FormItem>
Here is what i use instead of onSubmit for antd 4.x.x Form:
import React from 'react';
import { Form, Input, Button } from 'antd';
const FormItem = Form.Item;
class CustomForm extends React.Component {
handleFormSubmit = (values) => {
const title = values.title;
const content = values.content;
console.log(title, content);
};
render(){
return (
<div>
<Form onFinish={(values) => this.handleFormSubmit(values)}>
<FormItem label="Title" name="title">
<Input placeholder="Put a title here" />
</FormItem>
<FormItem label="Content" name="content">
<Input placeholder="Enter some content ..." />
</FormItem>
<FormItem >
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form>
</div>
);
}
}
export default CustomForm;
I want to show all the details filled in the html form on another page using react js. I have created the html form which is the landing page. And after clicking on submit all the information should be displayed on another page.
My form.js page for creating the html form
import React, { component } from 'react';
var details = () => {
return(
<div>
<form>
Name: {" "}
<input type="text" placeholder="Enter name" /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number" />
<br />
<input type="submit" value="submit"/>
</form>
</div>
);
}
export default details;
My app.js page
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Details from './form/form';
function App() {
return (
<div className="App">
<header className="App-header">
<Details />
</header>
</div>
);
}
export default App;
The data which you'll store in react state will be in browser memory and on refresh you'll lose that data.
In case, If you want functionality like the preview on form submit then you can store data in state and show/hide the preview on form submit.
So, Basically you can use state or some third party state management library to store the data. Here is a basic example of how you can achieve in the same details component.
import React, { useState } from 'react';
const Details = () => {
const [name, setName] = useState('');
const [number, setNumber] = useState(null);
const [showPreview, setShowPreview] = useState(false);
return(
<div>
{!showPreview && <form onSubmit={e => e.preventDefault()}>
Name: {" "}
<input type="text" placeholder="Enter name" onChange={e => setName(e.target.value)} /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number" onChange={e => setNumber(e.target.value)} />
<br />
<input type="button" value="submit" onClick={() => setShowPreview(!showPreview)}/>
</form>}
{showPreview && (<div>
<p>{name}</p>
<p>{number}</p>
</div>)}
</div>
);
}
export default Details;
Again, This answer is based on lots of assumptions. Maybe we need some more details in the question to have a precise answer.
In case if you want to display the same data on any other page then you can use Redux. Which can store the data in the redux store and you display the same data on another page.
First, on the app we want to create a function that can receive the data, then send it to the component as a prop:
import React from 'react';
import Details from './form';
function App() {
const getFormData = function (name, number) {
console.log('Name: ', name, 'Number: ', number)
}
return (
<div className="App">
<header className="App-header">
<Details sendFormData={getFormData} />
</header>
</div>
);
}
export default App
Then, inside the component you want to set each input to update their state as they change. When you click submit, you pass the state to the up to the app components getFormData function.
import React, { useState } from 'react';
const Details = (props) => {
const [userName, setName] = useState('');
const [userNumber, setNumber] = useState('');
const handleSubmit = () => {
props.sendFormData(userName, userNumber)
}
return (
<div>
Name: {" "}
<input type="text" placeholder="Enter name"
onChange={event => setName(event.target.value)} /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number"
onChange={event => setNumber(event.target.value)} />
<br />
<button onClick={() => handleSubmit()} >Submit</button>
</div>
);
}
export default Details;
I am facing trouble with initializing my form with redux-form and the 'initialValues' props. I read a lot posts (for instance here) and I don't manage to get it work...
I see that my initialValues is properly set but my fields are not updated with it... Maybe the issue is in my renderBasicField function but I don't know how to fix this.
Otherwise it could also be something like the prop is not populated yet when the component is rendered... But I don't know what to do to make it work as I must rely on mapStateToProps to feed it.
I saw a lot of post about this kind of issues and unfortunately for me I already set up the enableReinitialize property to true :)
Here is my code :
// My component
class ProfileForm extends React.Component {
render () {
console.log(this.props);
const { handleSubmit } = this.props;
const messageClassname = this.props.errorMessage !== undefined ? stylesShared.errorMessage : this.props.confirmationMessage !== undefined ? stylesShared.confirmationMessage : '';
return (
<div>
<div>
<div>
<form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
<div>
<h4>Votre profil</h4>
</div>
<div className={messageClassname}>
{this.props.errorMessage &&
<span>{this.props.errorMessage}</span>
}
{this.props.confirmationMessage &&
<span>{this.props.confirmationMessage}</span>
}
</div>
<div>
<Field name='firstname' type='text' label='Prénom' component={renderBasicField} />
</div>
<div>
<Field name='lastname' type='text' label='Nom' component={renderBasicField} />
</div>
<div>
<Field name='email' type='email' label='Email' addon='#' component={renderBasicField} />
</div>
<div>
<Field name='telephone' type='text' label='Téléphone' component={renderBasicField} />
</div>
<div>
<Field name='ranking' className='input-row form-group form-control' options={this.getTennisRankingsOptions()} type='select' component={renderSelectField} />
</div>
<div>
<Field name='city' type='text' label='Ville' component={renderBasicField} />
</div>
<div>
<button className='btn btn-info btn-lg center-block' type='submit'>Mettre à jour</button>
</div>
</form>
</div>
</div>
</div>
);
}
}
const reduxFormDecorator = reduxForm({
form: 'profile',
enableReinitialize: true,
validate: validateProfileForm
});
const mapStateToProps = (state) => {
return {
initialValues: state.userConnection.loadProfile.user
};
};
const reduxConnector = connect(
mapStateToProps,
null
);
export default reduxConnector(reduxFormDecorator(ProfileForm));
And the code to render my field :
// My renderFunction
export const renderBasicField = ({input, meta: {touched, error}, label, type='text', id, addon, styleClasses, handleChange, controlledAsyncValue}) => {
const inputStyles = getInputStyles(input.value, touched, error);
if (controlledAsyncValue !== input.value) {
input.value = controlledAsyncValue;
input.onChange(input.value);
}
return (<div className={inputStyles.container}>
{displayInputLabel(inputStyles.input.idInput, label)}
<div className={addon && 'input-group'}>
{addon && <span className='input-group-addon'>{addon}</span>}
<input
{...input}
className={classNames(styles.basicInputField, styleClasses)}
id={id}
value={input.disabled ? '' : input.value}
onChange={getOnChangeAction(input.onChange, handleChange)}
placeholder={label}
type={type}
aria-describedby={inputStyles.input.ariaDescribedBy}
/>
</div>
{touched && error &&
displayErrorMessage(error)}
</div>);
};
I am wondering if I am ignoring the initialValue with my custom renderBasicField function but in that case, I would I retrieve this value to set my input ?
Thanks a lot for your help ! :)
Try to switch connect and form decorator. It should helps.
export default reduxFormDecorator(reduxConnector(ProfileForm));