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.
Related
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 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
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.
I have an input whose value I want to store in a React variable.
<div>
<label>Nombre Completo: </label>
<input style={eachBit} required id='name' type='text' placeholder='Zeus Aurel'></input>
</div>
Without the complications of constructor or classes, I can't find anything useful anywhere. I know nothing of reactjs, please help.
onChange event allows value to be stored in state. Here is how input value is stored in a state named inputValue.
<input
onChange={e => this.setState({ inputValue: e.target.value }))
/>
Are you asking about the way to change/insert a HTML element as a variable ?
Hope this topic can help you : Insert HTML with React Variable Statements (JSX)
Somewhat new to react and having trouble passing multiple state values to an input.
Specifically, state from drop-down menus. I can accomplish this in a p tag by chaining the various state values together.
This works
<p>
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
</p>
This will return
one_two_three_four_five
Whenever I try to pass these same values into a single input I get an error.
This does not work
<label>
Title:
<input
value=
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
type="text" />
</label>
How can one pass multiple state values into a single input?
Template literals with variables :
<input
value={ `${this.state.one}_${this.state.two}` }
/>
You have to pass a single expression to the value attribute. Change to this:
<label>
Title:
<input value={`${this.state.one}_
${this.state.two}_
${this.state.three}_
${this.state.four}_
${this.state.five}`
}
type="text" />
</label>
Note: this is ES6 string interpolation. The ES5 alternative is the regular string concatenation with "+"