I have a problem of trying to make the input text field editable.
Currently, I am unable to edit the values of the input text field where i can remove or add new characters to the value in the input text field.
I have set the values statically in the state objects but I also want to edit the state values from the input text field.
How can I edit the code below to make the value editable?
import React, { Component } from 'react';
import { render } from 'react-dom';
class Info extends Component {
constructor(props) {
super(props);
this.state = {
name: "Jack Sparrow",
age: "52",
email: "jacksparrow52#gmail.com"
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let newState = {...this.state};
newState[e.target.name] = e.target.name
this.setState({
...newState
})
}
render() {
return (
<div>
<input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={(e) => this.handleChange(e)} />
<br /> <br />
<input type="text" name="age" value={this.state.age} placeholder="Enter your age..." onChange={(e) => this.handleChange(e)} />
<br /> <br />
<input type="text" name="email" value={this.state.email} placeholder="Enter your email..." onChange={(e) => this.handleChange(e)} />
<h3>Output states:</h3>
<p id="name">Entered Name: {this.state.name}</p>
<p id="age">Entered Age: {this.state.age}</p>
<p id="email">Entered Email: {this.state.email}</p>
</div>
);
}
}
render(<Info />, document.getElementById('root'));
You are setting the state to the target input name. Fix this line
newState[e.target.name] = e.target.name
with (notice e.target.value)
newState[e.target.name] = e.target.value
Change your input field like this, Add input field name and bind handle Change inside the input field. Now you do not want to bind handle Change in constructor.
<input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={this.handelChange.bind(this, 'name')} />
Now replace handle change function,
handelChange(field, event) {
this.setState({
[field]: event.target.value
})
}
I hope this helps, I created a codesandbox with this solution
https://codesandbox.io/s/editable-inputs-m4fqk6?file=/src/App.tsx:256-2201
import { useState } from "react";
interface infoProfile {
name: string;
email: string;
}
const App = () => {
const [editCancel, setEditCancel] = useState(false);
const [value, setValue] = useState<infoProfile>({
name: "Anakin Skywalker",
email: "anakin#empire.com"
});
const onClick = (): void => {
setValue({ email: value.email, name: value.name });
setEditCancel(false);
};
return (
<>
<h1>Editable Inputs</h1>
<div>
<button onClick={() => setEditCancel(!editCancel)}>
{editCancel ? "Cancel" : "Edit"}
</button>
{editCancel && <button onClick={onClick}>Save</button>}
</div>
{!editCancel && (
<div>
<h2>Name</h2>
<div>{value.name}</div>
<h2>Email</h2>
<div>{value.email}</div>
</div>
)}
{editCancel && (
<div>
<h2>Name</h2>
<input
value={value.name}
onChange={(e) =>
setValue({ name: e.target.value, email: value.email })
}
/>
<h2>Email</h2>
<input
value={value.email}
onChange={(e) =>
setValue({ email: e.target.value, name: value.name })
}
/>
</div>
)}
</>
);
};
export default App;
I have a form which has 5 input text type fields and a input file type field. I used onChange function.
this is the form
<form onSubmit ={this.onSubmit.bind(this)} >
<FormGroup bssize="sm">
<input onChange={this.handleChange} className="form-control" type="text" placeholder="Company Name" name="companyName" ref="companyName"/>
</FormGroup>
<FormGroup bssize="sm">
<input onChange={this.handleChange} className="form-control" type="text" placeholder="Account Name" name="AccountName" ref="AccountName" />
</FormGroup>
<FormGroup bssize="sm">
<input onChange={this.handleChange} className="form-control" type="text" placeholder="Bank Name" name="bankName" ref="bankName"/>
</FormGroup>
<FormGroup bssize="sm">
<input onChange={this.handleChange} className="form-control" type="text" placeholder="Branch" name="branch" ref="branch"/>
</FormGroup>
<FormGroup bssize="sm">
<input onChange={this.handleChange} className="form-control" type="text" placeholder="Account Number" name="accountNo" ref="accountNo"/>
</FormGroup>
<FormGroup>
<span>Bank Book Copy</span>
<input style={{display :'none'}} type="file" onChange={this.fileSelectedHandler} ref={fileInput => this.fileInput = fileInput } />
<Button onClick={()=>this.fileInput.click()} >
<Icon type="upload" /> Click to upload
</Button>
</FormGroup>
<input onClick={this.fileUploadHandler} className="btn btn-primary" bsstyle="success" name="submit" type="submit" value="Submit" />
</form>
now my problem is which filed filled at last only post into my API.I used AXIOS for HTTP request.
I used storage-connector for upload images
below I mentioned my onChange function
constructor(props){
super(props);
this.state = {
companyName : '',
AccountName : '',
bankName : '' ,
bankBookCpy : '' ,
accountNo : '' ,
branch : '' ,
BankList : '',
selectedFile : null,
}
}
fileSelectedHandler = event =>{
this.setState({
selectedFile: event.target.files[0]
})
}
handleChange = event => {
this.setState({
companyName: event.target.value,
AccountName: event.target.value,
bankName: event.target.value,
accountNo: event.target.value,
branch: event.target.value
});
}
fileUploadHandler = () => {
const fd = new FormData();
fd.append('image',this.state.selectedFile, this.state.selectedFile.name )
axios.post('http://localhost:3000/api/attachmentBanks/bankBookCpy/upload',fd , {
onUploadProgress : ProgressEvent => {
console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
}
})
.then(res => {
this.setState({
BankList: res.data.result.files.image[0].name,
});
});
}
AddMeetup(newMeetup){
axios.request({
method:'post',
url:'http://localhost:3000/api/companyBankDetails',
data : newMeetup
}).then(response => {
this.props.history.push('/');
}).catch(err => console.log(err));
onSubmit(e){
const newMeetup = {
companyName: this.state.companyName,
AccountName : this.state.AccountName,
bankName : this.state.bankName,
branch : this.state.branch,
accountNo : this.state.accountNo,
bankBookCpy : this.state.BankList
}
this.AddMeetup(newMeetup);
e.preventDefault();
}
Above functions are only stored last onChange value
You can handle it like this:
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
First change you handleChange function to the following :
handleChange = name => event => {
this.setState({ [name]: event.target.value} );
}
Then send your name argument to the onChange function :
<form onSubmit ={this.onSubmit.bind(this)} >
{
Object.entries({
"Company Name": "companyName",
"Account Name": "AccountName",
"Bank Name": "bankName",
"Branch": "branch",
"Account Number": "accountNo"
}).map(([field, name]) =>
<FormGroup bssize="sm" key={name}>
<input onChange={this.handleChange(name)} className="form-control" type="text" placeholder={field} name={name} ref={name} />
</FormGroup>)
}
<FormGroup>
You can avoid repetitions in your code by also mapping an array to create your form
Here your issue is you call same handleChange() Function on each onChange event. let's assume you change "company name" input field. When you change it you will call the handleChange() function. Then inside that function, you assign event.target.value to all of the fields(companyName, AccountName, etc). But event.target.value only give you the data from the field that you are changing to call the handleChange() method, In this case, it is "company Name" input. So this will replace all of your form data states with the text you entered in "Company Name".
So, the hard way is you can create separate functions to handle each input fields. But it is not good practice. Instead, you can do as answered by SakoBu.
that method will take state name from event.target.name and state data from event.target.value. So if you change the value of "Company Name" your state update code in the handleChange() will be the same as companyName: event.target.value, but only change CompanyName state, not other form states.
You don't need to worry about image uploading system. Because you can use your existing fileUploadHandler() method to handle the changes of the file uploading.
As answered by SakoBu, the approach would solve your problem.
One thing I noticed is you are assigning ref to each input field, you don't need to do so.
Please do remember that if input type is checkbox,radiobutton you will get corresponding value by event.taget.checked.
It's always a good practise to check event type, by event.target.type.
For more details visit :-
https://reactjs.org/docs/forms.html
Hope this Helps,
Cheers !!
I have a simple form in my render function, like so:
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
},
handleLogin: function() {
// How can I access email and password here?
}
What should I write in my handleLogin: function() { ... } to access Email and Password fields?
There are a few ways to do this:
1) Get values from array of form elements by index
handleSubmit = (event) => {
event.preventDefault();
console.log(event.target[0].value)
}
2) Using name attribute in html
handleSubmit = (event) => {
event.preventDefault();
console.log(event.target.elements.username.value) // from elements property
console.log(event.target.username.value) // or directly
}
<input type="text" name="username"/>
3) Using refs
handleSubmit = (event) => {
console.log(this.inputNode.value)
}
<input type="text" name="username" ref={node => (this.inputNode = node)}/>
Full example
class NameForm extends React.Component {
handleSubmit = (event) => {
event.preventDefault()
console.log(event.target[0].value)
console.log(event.target.elements.username.value)
console.log(event.target.username.value)
console.log(this.inputNode.value)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
name="username"
ref={node => (this.inputNode = node)}
/>
</label>
<button type="submit">Submit</button>
</form>
)
}
}
Use the change events on the inputs to update the component's state and access it in handleLogin:
handleEmailChange: function(e) {
this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
this.setState({password: e.target.value});
},
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
<input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
<button type="button" onClick={this.handleLogin}>Login</button>
</form>);
},
handleLogin: function() {
console.log("EMail: " + this.state.email);
console.log("Password: " + this.state.password);
}
Working fiddle.
Also, read the docs, there is a whole section dedicated to form handling: Forms
Previously you could also use React's two-way databinding helper mixin to achieve the same thing, but now it's deprecated in favor of setting the value and change handler (as above):
var ExampleForm = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {email: '', password: ''};
},
handleLogin: function() {
console.log("EMail: " + this.state.email);
console.log("Password: " + this.state.password);
},
render: function() {
return (
<form>
<input type="text" valueLink={this.linkState('email')} />
<input type="password" valueLink={this.linkState('password')} />
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
}
});
Documentation is here: Two-way Binding Helpers.
Adding on to Michael Schock's answer:
class MyForm extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
console.log(data.get('email')); // Reference by form input's `name` tag
fetch('/api/form-submit-url', {
method: 'POST',
body: data,
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Enter username</label>
<input id="username" name="username" type="text" />
<label htmlFor="email">Enter your email</label>
<input id="email" name="email" type="email" />
<label htmlFor="birthdate">Enter your birth date</label>
<input id="birthdate" name="birthdate" type="text" />
<button>Send data!</button>
</form>
);
}
}
See this Medium article: How to Handle Forms with Just React
This method gets form data only when the Submit button is pressed. It is much cleaner, IMO!
For those who don't want to use ref and reset the state with OnChange event, you can just use simple OnSubmit handle and loop through the FormData object.
Note that you cannot access formData.entries() directly since it is an iterable, you have to loop over it.
This example is using React Hooks:
const LoginPage = () => {
const handleSubmit = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
};
And if you're using TypeScript:
export const LoginPage: React.FC<{}> = () => {
const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
};
An alternative approach is to use the ref attribute and reference the values with this.refs. Here is a simple example:
render: function() {
return (<form onSubmit={this.submitForm}>
<input ref="theInput" />
</form>);
},
submitForm: function(e) {
e.preventDefault();
alert(React.findDOMNode(this.refs.theInput).value);
}
More info can be found in the React docs:
https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
For a lot of the reasons described in How do I use radio buttons in React? this approach isn't always the best, but it does present a useful alternative in some simple cases.
There isn't any need to use refs. You can access it using an event:
function handleSubmit(e) {
e.preventDefault()
const {username, password } = e.target.elements
console.log({username: username.value, password: password.value })
}
<form onSubmit={handleSubmit}>
<input type="text" id="username"/>
<input type="text" id="password"/>
<input type="submit" value="Login" />
</form>
An easy way to deal with refs:
class UserInfo extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const formData = {};
for (const field in this.refs) {
formData[field] = this.refs[field].value;
}
console.log('-->', formData);
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input ref="phone" className="phone" type='tel' name="phone"/>
<input ref="email" className="email" type='tel' name="email"/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
export default UserInfo;
You could switch the onClick event handler on the button to an onSubmit handler on the form:
render : function() {
return (
<form onSubmit={this.handleLogin}>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
);
},
Then you can make use of FormData to parse the form (and construct a JSON object from its entries if you want).
handleLogin: function(e) {
const formData = new FormData(e.target)
const user = {}
e.preventDefault()
for (let entry of formData.entries()) {
user[entry[0]] = entry[1]
}
// Do what you will with the user object here
}
If all your inputs / textarea have a name, then you can filter all from event.target:
onSubmit(event){
const fields = Array.prototype.slice.call(event.target)
.filter(el => el.name)
.reduce((form, el) => ({
...form,
[el.name]: el.value,
}), {})
}
Totally uncontrolled form 😊 without onChange methods, value, defaultValue...
I would suggest the following approach:
import {Autobind} from 'es-decorators';
export class Form extends Component {
#Autobind
handleChange(e) {
this.setState({[e.target.name]: e.target.value});
}
#Autobind
add(e) {
e.preventDefault();
this.collection.add(this.state);
this.refs.form.reset();
}
shouldComponentUpdate() {
return false;
}
render() {
return (
<form onSubmit={this.add} ref="form">
<input type="text" name="desination" onChange={this.handleChange}/>
<input type="date" name="startDate" onChange={this.handleChange}/>
<input type="date" name="endDate" onChange={this.handleChange}/>
<textarea name="description" onChange={this.handleChange}/>
<button type="submit">Add</button>
</form>
)
}
}
Here is the shortest way to get data from the form and the best way to avoid id and ref just by using FormData:
import React, { Component } from 'react'
class FormComponent extends Component {
formSubmit = (event) => {
event.preventDefault()
var data = new FormData(event.target)
let formObject = Object.fromEntries(data.entries())
console.log(formObject)
}
render() {
return (
<div>
<form onSubmit={this.formSubmit}>
<label>Name</label>
<input name="name" placeholder="name" />
<label>Email</label>
<input type="email" name="email" />
<input type="submit" />
</form>
</div>
)
}
}
export default FormComponent
More clear example with es6 destructing
class Form extends Component {
constructor(props) {
super(props);
this.state = {
login: null,
password: null,
email: null
}
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
let login = this.state.login;
let password = this.state.password;
// etc
}
render() {
return (
<form onSubmit={this.onSubmit.bind(this)}>
<input type="text" name="login" onChange={this.onChange.bind(this)} />
<input type="password" name="password" onChange={this.onChange.bind(this)} />
<input type="email" name="email" onChange={this.onChange.bind(this)} />
<button type="submit">Sign Up</button>
</form>
);
}
}
Give your inputs ref like this
<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />
Then you can access it in your handleLogin like so:
handleLogin: function(e) {
e.preventDefault();
console.log(this.refs.email.value)
console.log(this.refs.password.value)
}
I use like this using React Component state:
<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />
handleChange(e){
this.setState({[e.target.name]: e.target.value})
}`
Also, this can be used too.
handleChange: function(state,e) {
this.setState({[state]: e.target.value});
},
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
<input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
},
handleLogin: function() {
console.log("EMail: ", this.state.email);
console.log("Password: ", this.state.password);
}
If you are using Redux in your project, you can consider using the higher order component redux-form.
In many events in JavaScript, we have event which gives an object, including what event happened and what are the values, etc.
That's what we use with forms in React as well.
So in your code you set the state to the new value. Something like this:
class UserInfo extends React.Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
}
handleLogin(e) {
e.preventDefault();
for (const field in this.refs) {
this.setState({this.refs[field]: this.refs[field].value});
}
}
render() {
return (
<div>
<form onSubmit={this.handleLogin}>
<input ref="email" type="text" name="email" placeholder="Email" />
<input ref="password" type="password" name="password" placeholder="Password" />
<button type="button">Login</button>
</form>
</div>
);
}
}
export default UserInfo;
Also this is the form example in React v.16, just as reference for the form you creating in the future:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
onChange(event){
console.log(event.target.value);
}
handleSubmit(event){
event.preventDefault();
const formData = {};
for (const data in this.refs) {
formData[data] = this.refs[data].value;
}
console.log(formData);
}
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" ref="username" onChange={this.onChange} className="form-control"/>
<input type="text" ref="password" onChange={this.onChange} className="form-control"/>
<button type="submit" className="btn-danger btn-sm">Search</button>
</form>
Output image attached here
To improve the user experience; when the user clicks on the submit button, you can try to get the form to first show a sending message. Once we've received a response from the server, it can update the message accordingly. We achieve this in React by chaining statuses. See codepen or snippets below:
The following method makes the first state change:
handleSubmit(e) {
e.preventDefault();
this.setState({ message: 'Sending...' }, this.sendFormData);
}
As soon as React shows the above Sending message on screen, it will call the method that will send the form data to the server: this.sendFormData(). For simplicity I've added a setTimeout to mimic this.
sendFormData() {
var formData = {
Title: this.refs.Title.value,
Author: this.refs.Author.value,
Genre: this.refs.Genre.value,
YearReleased: this.refs.YearReleased.value};
setTimeout(() => {
console.log(formData);
this.setState({ message: 'data sent!' });
}, 3000);
}
In React, the method this.setState() renders a component with new properties. So you can also add some logic in render() method of the form component that will behave differently depending on the type of response we get from the server. For instance:
render() {
if (this.state.responseType) {
var classString = 'alert alert-' + this.state.type;
var status = <div id="status" className={classString} ref="status">
{this.state.message}
</div>;
}
return ( ...
codepen
This might help Meteor (v1.3) users:
render: function() {
return (
<form onSubmit={this.submitForm.bind(this)}>
<input type="text" ref="email" placeholder="Email" />
<input type="password" ref="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
);
},
submitForm: function(e) {
e.preventDefault();
console.log( this.refs.email.value );
console.log( this.refs.password.value );
}
This is an example of dynamically added fields. Here form data will store by input name key using a React useState hook.
import React, { useState } from 'react'
function AuthForm({ firebase }) {
const [formData, setFormData] = useState({});
// On Form Submit
const onFormSubmit = (event) => {
event.preventDefault();
console.log('data', formData)
// Submit here
};
// get Data
const getData = (key) => {
return formData.hasOwnProperty(key) ? formData[key] : '';
};
// Set data
const setData = (key, value) => {
return setFormData({ ...formData, [key]: value });
};
console.log('firebase', firebase)
return (
<div className="wpcwv-authPage">
<form onSubmit={onFormSubmit} className="wpcwv-authForm">
<input name="name" type="text" className="wpcwv-input" placeholder="Your Name" value={getData('name')} onChange={(e) => setData('name', e.target.value)} />
<input name="email" type="email" className="wpcwv-input" placeholder="Your Email" value={getData('email')} onChange={(e) => setData('email', e.target.value)} />
<button type="submit" className="wpcwv-button wpcwv-buttonPrimary">Submit</button>
</form>
</div>
)
}
export default AuthForm
For TypeScript users
import react from 'react'
interface FormInterface {
[key: string]: string
}
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
let formData = new FormData(event.currentTarget)
let formObj: FormInterface = {}
for (let [key, value] of Array.from(formData.entries())) {
formObj[key] = value.toString()
}
};
<form onSubmit={handleSubmit}>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
The simplest solution that came to my mind is this:
<form onSubmit={(e) => handleLogin(e)}>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
Your handle fuction:
const handleLogin = (e) => {
e.preventDefault()
const data = {
email: e.target.elements.email.value,
password: e.target.elements.password.value
}
console.log('FormData: ', data)
}
When you click on your login button you will see FormData in console in this format:
FormData: {email: 'whatever you tiped here', password: 'also whatever you tiped here'}.
e.target.elements.email.value targets elements with specific name, in your case it is email and password.
After console.log in handleLogin, you can do some verification logic and login logic.
If you have multiple occurrences of an element name, then you have to use forEach().
HTML
<input type="checkbox" name="delete" id="flizzit" />
<input type="checkbox" name="delete" id="floo" />
<input type="checkbox" name="delete" id="flum" />
<input type="submit" value="Save" onClick={evt => saveAction(evt)}></input>
JavaScript
const submitAction = (evt) => {
evt.preventDefault();
const dels = evt.target.parentElement.delete;
const deleted = [];
dels.forEach((d) => { if (d.checked) deleted.push(d.id); });
window.alert(deleted.length);
};
Note the dels in this case is a RadioNodeList, not an array, and is not an Iterable. The forEach() is a built-in method of the list class. You will not be able to use a map() or reduce() here.
TypeScript will complain if you try Aliaksandr Sushkevich's solution. One workaround can be done using type assertions:
<form
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
const target = e.target as typeof e.target & {
username: { value: string };
password: { value: string };
};
const username = target.username.value; // typechecks
const password = target.password.value; // typechecks
// etc...
}}
>
<input type="text" name="username"/>
...
Though, this is still just a workaround, because here you are telling TypeScript what to expect. This will break at runtime if you add a value that doesn't have a corresponding input element.
I think this is also the answer that you need. In addition, Here I add the required attributes. onChange attributes of Each input components are functions. You need to add your own logic there.
handleEmailChange: function(e) {
this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
this.setState({password: e.target.value});
},
formSubmit : async function(e) {
e.preventDefault();
// Form submit Logic
},
render : function() {
return (
<form onSubmit={(e) => this.formSubmit(e)}>
<input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} required />
<input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} required />
<button type="button">Login</button>
</form>);
},
handleLogin: function() {
//Login Function
}
Here is my approach for collecting multiple form inputs using single inputChangeHandler
import React from "react";
const COLORS = ["red", "orange", "yellow", "purple", "green", "white", "black"];
export default function App() {
const initialFormFields = {
name: undefined,
email: undefined,
favourite_color: undefined
};
const [formInput, setFormInput] = React.useState(initialFormFields);
function inputChangeHandler(event) {
setFormInput(prevFormState => ({
...prevFormState,
[event.target.name]: event.target.value
}))
};
return (
<div className="App">
<form>
<label>Name: <input name="name" type="text" value={formInput.name} onChange={inputChangeHandler}/></label>
<label>Email: <input name="email" type="email" value={formInput.email} onChange={inputChangeHandler}/></label>
<div>
{COLORS.map(color => <label><input type="radio" name="favourite_color" value={color} key={color} onChange={inputChangeHandler}/> {color} </label>)}
</div>
</form>
<div>
Entered Name: {formInput.name}
Entered Email: {formInput.email}
Favourite Color: {formInput.favourite_color}
</div>
</div>
);
}
This will be the easiest method:
const formValidator = (form) => {
let returnData = {}
console.log(form.length);
for (let i = 0; i < form.length; i++) {
const data = form[i]
if (data.name != null && data.name != "") {
returnData[data.name] = data.value;
}
}
return returnData
}
In the form, simply use:
<form onSubmit={(e) => {
e.preventDefault()
let data = formValidator(e.currentTarget)
}}>
<RoundTextFiled name='app-id' style={{ marginTop: '10px', borderRadius: '20px' }} label="App id" fullWidth required />
<RoundTextFiled name='api-hash' style={{ marginTop: '5px' }} label="Api hash" fullWidth required />
<RoundTextFiled name='channel-id' style={{ marginTop: '5px' }} label="Channel id" fullWidth required />
<Button type='submit' variant="contained" fullWidth style={{ padding: '10px', marginTop: '5px', borderRadius: '10px' }}>Login</Button>
</form>
<form onSubmit={handleLogin}>
<input type="text" name="email" placeholder="Email" />
<input type="text" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
const handleLogin = (event) => {
event.preventDefault();
console.log(event.target[0].value)
console.log(event.target[1].value)
}
Use:
import { useState } from 'react'
export default function App() {
const [data, setData] = useState({})
const updateData = e => {
setData({
...data,
[e.target.name]: e.target.value
})
}
const submit = e => {
e.preventDefault()
console.log(data)
}
return (
<form onSubmit={submit}>
<input
name="email"
type="email"
onChange={updateData}
/>
<input
name="password"
type="password"
onChange={updateData}
/>
<button>Submit</button>
</form>
)
}