I have a field in my react app whose value can be dynamic,
If I click "Create new", its default value is "", and if I click an item from a table, it populates the input field with the corresponding value.
However, when I try to add another text to the non-empty input field, the value is not changing.
Here's my input field:
<input type="text" className="form-control" placeholder="John" onChange={e => handleInputChange(e.target.value, "firstname")} value={selectedItem && selectedItem.client?.firstname }/>
The selectedItem's value is deconstructed from a props called selectedEvent, I made it like this since props are immutable and I thought that was the problem.
EDITED
I even removed the onChange and replace the dynamic value with a static value. But its not changing at all.
EDIT
<input type="text" className="form-control" placeholder="John" value="Hello world" onChange={e => console.log(e.target.value)}/>
I noticed, when I log the onChange result, it displays the Hello world and whatever key you press, be it backspace or any letters, it only removes or add 1 Letter.
For example:
Default value: Hello world, when I type asdasd it logs Hello worlda
and when I press backspace, it logs Hello worl
Related
form field image
how do I receive identical form field separately so I can add them to the database. like 3 email input fields or so...
Your question requires more clarification.
If you are using single submit button it can be either of two things, if you are using controlled inputs, as soon as your form is submitted, you can use your state to pass all the data to the backend.
For controlled input you will need to pass onChange handler in each input. Since you are using identical fields I suggest using array of objects and use the index of the array to update the data in the specific index.
If you are using uncontrolled input then you can use form data to retrieve values from the form.
Do remember that you need 'name' in each input for this work.
<form onSubmit={savePassengerSeats}>
<label>
Full Name
<input type="text" id="fullName" name="fullName" />
</label>
<label>
Mobile
<input type="number" id="mobile" name="mobile" />
</label>
<! -- other input -->
<button>Save</button>
</form>
const savePassengerSeats = (event)=>{
const formData = new FormData(event.target)
//use this form data to save data in the db
}
pattern="[a-zA-Z ]*"
im trying to limit the input to be only letters no numbers or symbols should be allowed
but the given code is not working
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
defaultValue={kardName}
/>
i have also tried to use onChange method but it wasn't working too
anyhelp would be highly apperciated
The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
You can see from the snippet below, that if you hit submit, the pattern is checked and it's actually working.
<form>
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
/>
<input type="submit" />
</form>
If you want to prevent the user from inserting some character, the pattern attribute won't help you.
What You can do is check the character inside the onKeyDown function, and prevent the insertion there. Something like this:
const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
event.preventDefault()
}
...
<input
name="cardName"
type="text"
required
onKeyDown={onKeyDown}
/>
I'm trying to clear input item after click on Add. It's on line 49 but doesn't work:
Code: https://stackblitz.com/edit/react-wbn3ms?file=src%2FStepsForm.js
setForm({date: '', distance: ''});
Could you please help why?
Assign form.date,form.distance from form state to value attribute in date and distance input fields
<input id="date" name="date" onChange={handleChange} value={form.date} />
<input id="distance" name="distance" onChange={handleChange} value={form.distance}/>
without the value attribute, the input fields are uncontrolled.
You haven't set value={form.date} and value={form.distance} on those inputs, so changes done into the state don't get reflected back into the input elements.
I am using Ui Kitten in react native for UI theme.
<Input value={this.state.total} /> // doesn't show the value
<Input value="1" /> // now shows the value
<Input value={console.log(this.state.total)} /> // returns 1 in log
Why input box is not showing value from state... what can be the error ?
I made it as <Input value={this.state.total.toString()} /> and solved. Input value field was taking only string value, and i was passing integer.
When I click on Submit, it gives an error "required". But when i type text it doesn't take first character. On entering first character it only removes "required" message.
Can you please tell me why it is not showing first character.
<div className="input-field">
<label htmlFor="state">State</label>
<input
placeholder="State"
name="state"
autoComplete="off"
type="text"
value={state}
onChange = { e => setState(e.target.value)}
ref={register({required:'required'})}
/>
<span className="error">{errors.state && errors.state.message}</span>
</div>
It's probably related to the usage of react-hook-form with your custom controlled logic (value and onChange).
If you don't need the input to be controlled, I would recommend dropping the value and onChange props from the input, as they seem to be conflicting with the package.
Most likely, because setState is an asynchronous method. Try to add the async on your onChange function and await this.setState(). It should capture all the input characters.