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.
Related
Currently, I am using react-hook-form for form transmission.
and, I want to render the number of characters included in input and textarea.
The code I implemented is as follows.
<input
id="title"
type="text"
placeholder="title"
{...register('title', {
required: true,
})}
/>
<span>
{watch('title').length}/20
</span>
As shown above, I tried to render the number of characters input through watch, but failed. How do you represent the number of characters?
Update your watch with the condition for undefined.
{ watch('title') ? (watch('title').length)/20 : '' }
Can check working code from here : https://stackblitz.com/edit/stackoverflow-095?file=src%2FApp.jsx
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've got a form, where I wanna set in the state (setEducation for example) incoming value from the input. I use onChange, but this causes the component to be rendered each time I make a change to the input field. What is the right way to fix the problem?
<form id="loginform" onSubmit={onBecomeDoctorRequestHandler} >
<div className="form-group mb-3">
<label>Education</label>
<input
type="text"
className="form-control"
required
this onChange causes the placeholder="Harvard"
component to be rendered onChange={(event) => setEducation(event.target.value.trim())}
/>
<small className="text-danger form-text">
{educationError}
</small>
</div>
As-is all your form elements will re-render when any form element changes because the "value" of onClick is a new function each time the component runs (renders).
To fix that, wrap the onClick function in a useCallback. The useCallback will preserve the "value" of the function across renders, so only the elements that needs to be re-rendered will be.
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 "+"