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.
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'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 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 want to input the default value of the field to 0, I'm using formik to develop the form. I have tried setting initial value to 0 in input props but it's not working.
Try setting this on the value prop using a one-line if statement , like as follow:
<input
type="type"
name="name"
value={values.value ? values.value : 0}
/>
This will use 0 when the variable you're using i'ts null, empty, etc
You can try "placeholder" in the field.
<Field name="Amount" type="text" placeholder="0" />