This question already has answers here:
Understanding computed properties (square brackets)
(3 answers)
What do square brackets around a property name in an object literal mean?
(2 answers)
Closed 4 years ago.
Why when I use form elements I got to put e.target.name in brackets?
Here's my code :
onChange (e) {
this.setState({ *[e.target.name]* : e.target.value});
}
(...)
<div>
<label htmlFor=""> Title : </label>
<input type="text" name="title" onChange={this.onChange} value={this.state.title} />
</div>
</form>
This is to dynamically update object property (when the name of the property is unknown upfront but runtime). This way you could have multiple React inputs having a different name property and using the same onChange handler to update part of the state.
Related to this.
Instead of this:
<input type="text" name="title" onChange={this.onTitleChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onDescriptionChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onAddressChange} value={this.state.description} />
onTitleChange (e) {
this.setState({ title : e.target.value});
}
onAddressChange (e) {
this.setState({ address : e.target.value});
}
onDescriptionChange (e) {
this.setState({ description : e.target.value});
}
We can write just one handler like you presented:
<input type="text" name="title" onChange={this.onChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onChange} value={this.state.description} />
onChange (e) {
this.setState({ [e.target.name] : e.target.value});
}
Related
To set the autocomplete off for a simple input it must be done like this: <input type="text" autocomplete="off">
In this case, there is a Formik Field and the input looks like this:
<Field
className="my-class"
name="myValues"
as={Input}
placeholder="Write something"
/>
and it seems that adding autocomplte="off" doesn't work in this case:
<Field
className="my-class"
name="myValues"
as={Input}
placeholder="Write something"
autocomplete="off"
/>
Any ideas?
Solution: camelCase.
Instead of autocomplete='off', use autoComplete='off'.
I am not sure where you are doing wrong. You can simply do this:
<label>
<Field name="picked" value="One" autocomplete="off" />
One
</label>
According to doc if you don't pass anything it will treat as a input
Here is the demo:https://codesandbox.io/s/happy-khayyam-9mdll?file=/index.js
<Field
name="password"
type="password"
component={() =>
<input
className="form-control"
type="password"
autoComplete="new-password"
/>
}
/>
This question already has answers here:
Handle change event of all input fields without using refs
(2 answers)
Closed 2 years ago.
I have several inputs ,Each of the inputs has its own value .How can I have a function for (onChange) all of them ?
For example
handleChange1(event) {
this.setState({value1: event.target.value});
}
handleChange2(event) {
this.setState({value2: event.target.value});
}
}
handleChange3(event) {
this.setState({value3: event.target.value});
}
<input type="text" value={this.state.value1} onChange={this.handleChange1} />
<input type="text" value={this.state.value2} onChange={this.handleChange2} />
<input type="text" value={this.state.value3} onChange={this.handleChange3} />
I just want to have one handleChange
When you need to handle multiple controlled input elements, you can add a name attribute to each element and let the handler function choose what to do based on the value of event.target.name.
For example:
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
value1:
<input
name="value1"
type="checkbox"
checked={this.state.value1}
onChange={this.handleInputChange} />
</label>
<br />
<label>
value2:
<input
name="value2"
type="number"
value={this.state.value2}
onChange={this.handleInputChange} />
</label>
<br />
<label>
value3:
<input
name="value3"
type="text"
value={this.state.value3}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
If you add a name to the input you can use that off of the event.
handleChange1(event) {
const {name, value} = event.target
this.setState({[name]: value});
}
<input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} />
<input name="inputtwo" type="text" value={this.state.value2} onChange={this.handleChange2} />
<input name="inputthree" type="text" value={this.state.value3} onChange={this.handleChange3} />
You can simply do by using input name:
Code:
import React from "react";
import "./styles.css";
class MyComponent extends React.Component {
state = {
value1: "",
value2: "",
value3: ""
};
handleChange = (event) => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
console.log(this.state);
return (
<>
<input
name="value1"
value={this.state.value1}
type="text"
value={this.state.value1}
onChange={this.handleChange}
/>
<input
name="value2"
value={this.state.value2}
type="text"
value={this.state.value2}
onChange={this.handleChange}
/>
<input
name="value3"
value={this.state.value3}
type="text"
value={this.state.value3}
onChange={this.handleChange}
/>
</>
);
}
}
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<MyComponent />
</div>
);
}
Demo: https://codesandbox.io/s/beautiful-brook-p46zs?file=/src/App.js:0-1092
i always do this by switch case
handleChange(event) {
switch (event.target.name) {
case 'name1':
this.setState({ name1: event.target.value });
break;
case 'name2':
this.setState({ name2: event.target.value });
break;
case 'name3':
this.setState({ name3: event.target.value });
break;
default:
break;
}
}
<input type="text" name="name1" value={this.state.value1} onChange={this.handleChange1} />
<input type="text" name="name2" value={this.state.value2} onChange={this.handleChange2} />
<input type="text" name="name3" value={this.state.value3} onChange={this.handleChange3} />
You can use react hooks useState for each field:
const [value1,setvalue1] = useState();
<input type="text" value={value1} onChange={(e)=>setvalue1(e.target.value)}/>
You still do have handle change to each input but you write less code.
You can also look here for more info about react hooks: https://reactjs.org/docs/hooks-state.html
If all inputs are same, I think we can render them dynamically so we don't need to repeat ourself and also make the code more clean.
I think we can have an array of inputs then render dynamically. By using closure, we can have one handleChange function for all inputs.
state={
inputValues: []
}
handleChange(index){
return (event)=>{
this.state.inputValues[index] = event.target.value;
this.setState({inputValues: this.state.inputValues})
}
}
render(){
return this.states.inputValues.map((inputValue, index)=>
<input type="text" value={inputValue} onChange={this.handleChange(index)} />
)
}
I am new to Redux. I've learned React and trying to learn Redux. I am building a todo app with Redux. I am managed to create, read and delete todos, but I am not managed to edit the todo.
My code: AddTodoForm
<FormGroup>
<Label for="title">Title</Label>
<Input type="text" name="title" id="title" placeholder="Enter Title" onChange={this.handleChange.bind(this)} /> {/* <input type="text" value={this.state.value} onChange={this.handleChange.bind(this, 'title')} /> */}
</FormGroup>
<FormGroup>
<Label for="description">Description </Label>
<Input type="textarea" name="description" id="description" onChange={this.handleChange.bind(this)} />
</FormGroup>
<FormGroup>
<div>
<CustomInput className="toggleInput" type="checkbox" data-toggle="toggle" id="exampleCustomCheckbox" label="Do You want to add Reminder??" onChange={this.toggle.bind(this, !this.state.checkBoxToggle)} />
</div>
</FormGroup>
{this.state.checkBoxToggle ?
<FormGroup>
<Label for="reminder">Reminder </Label>
<Input type="datetime-local" name="date" defaultValue={moment(Date.now()).format( 'YYYY-MM-DDTHH:mm')} id="date" onChange={this.handleChange.bind(this)} />
</FormGroup>
: ''}
<FormGroup check row>
<Col className="text-center">
<Button className="btn btn-success" onClick={this.handleSubmit.bind(this)}>Submit</Button>
</Col>
</FormGroup>
My handleChange function, where I set states of input:
handleChange(e) {
console.log(e.target.value, e.target.name);
if (e.target.name == "date") {
console.log('date is', e.target.value, new Date(e.target.value).valueOf());
this.setState({
[e.target.name]: new Date(e.target.value).valueOf()
})
} else {
this.setState({
[e.target.name]: e.target.value
})
}
}
This the render list function, where I want to edit my todo, but I am not able to edit the todo. I am able to delete, but not edit:
renderList() {
if (this.props.todos) {
return _.map(this.props.todos, (todo, id) => {
return (
<tr key={id + 1}>
<th scope="row">{id + 1}</th>
<td><Input type="text" disabled name="title" id="title" value={todo.title} onChange={this.handleChange.bind(this)} /></td>
<td><Input type="textarea" value={todo.description ? todo.description : this.state.description} name="description" id="description" onChange={this.handleChange.bind(this)} /></td>
<td>{todo.reminder}</td>
<td> <button className='btn btn-danger' onClick={this.onDeleteClick.bind(this, todo._id)}>Delete</button></td>
<td><button className='btn btn-success' onClick={this.markCompleted.bind(this, todo._id)}>Mark Complete</button></td>
</tr>
);
})
}
}
The specific todo, which I want to edit doesn't allow to type any value in the input box. I am not able to set it. Please let me know where I am doing wrong.
Don't reinvent the wheel. Instead of trying to reimplement form state, with event handlers, slice and reducers, use Redux Form.
It is made for that specific purpose and has an elegant, efficient API.
I just started learning ReactJS so any help would be appreciated. I'm trying to make a form where user inputs his/her address into multiple input fields. When the user finishes typing into ALL input fields, then a function will be triggered to validate the address. Through research, I found out about onChange and onBlur but it seems like that only works for one input field. Is there any other way to keep track of all five inputs and trigger a function after the user finishes? Or if there is any way to use onChange to do so, I would love to know. The following is the code for my form. Thank you in advance.
<form>
<label>
<DebounceInput
name="addressLine1"
placeholder="Address Line 1"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
/>
</label>
<label>
<DebounceInput
name="addressLine2"
placeholder="Address Line 2"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.addressLine2}
/>
</label>
<label>
<DebounceInput
name="city"
placeholder="City"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.city}
/>
</label>
<label>
<br />
<DebounceInput
name="state"
placeholder="State"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.state}
/>
</label>
<label>
<DebounceInput
name="postalCode"
placeholder="Postal Code"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.postalCode}
/>
</label>
</form>
Maybe you can incorporate a condition inside of your handleChange function, where you check if your currentstate is sufficient to do a validation, if so you can trigger the validation.
This question already has answers here:
Unable to access React instance (this) inside event handler [duplicate]
(19 answers)
Closed 7 years ago.
I was rewriting the React Tutorial in ES6, and got stuck in tutorial16.js. Whats the proper way to write this es5 in es6 format?
// tutorial16.js
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
render: function() {
return (
<form className="commentForm">
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
}
});
Here is my CommentForm.jsx that I've written in ES6. If I try to type anything in the form, I get this message in the console: Uncaught TypeError: Cannot read property 'setState' of undefined
What I'm doing wrong?
import React from 'react';
class CommentForm extends React.Component {
constructor(props){
super(props);
this.state = { author: '', text: '' }
}
handleAuthorChange(e){
this.setState({author: e.target.value});
};
handleTextChange(e){
this.setState({text: e.target.value});
}
render(){
return(
<form className="commentForm">
<input type="text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange}/>
<input type="text" placeholder="Say something..." value={this.state.text} onChange={this.handleTextChange}/>
<input type="submit" value="Post" />
</form>
);
}
}
export default CommentForm;
You are missing binding onChange handlers to the instance. They are being fired in totally different context, where this doesn't point to your CommentForm.
It should be instead:
<input onChange={this.handleAuthorChange.bind(this)} type="text" placeholder="Your name" value={this.state.author} />
<input onChange={this.handleTextChange.bind(this)} type="text" placeholder="Say something..." value={this.state.text} />
With property initializers (ES6+) it may look like this:
class CommentForm extends React.Component {
state = {
author: '', text: ''
};
handleAuthorChange = (e) => {
this.setState({author: e.target.value});
};
handleTextChange = (e) => {
this.setState({text: e.target.value});
};
render() {
return <form className="commentForm">
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
}
}