score:1
Accepted answer
you need to use the <controller />
component, as register
isn't working with external controlled components like your <input />
component. check this section in the docs for more information.
you can also omit usestate
here and let rhf handle the state changes for you.
const app = () => {
const {
control,
handlesubmit,
formstate: { errors }
} = useform({
defaultvalues: { email: "", password: "" }
});
const submitform = (data) => {
console.log(data);
};
return (
<div classname="row">
<div classname="col-sm-12">
<form onsubmit={handlesubmit(submitform)}>
<formgroup classname="has-wrapper">
<controller
name="email"
control={control}
defaultvalue=""
rules={{ required: true }}
render={({ field: { ref, onchange, ...field } }) => (
<input
{...field}
type="email"
id="email"
innerref={ref}
onchange={({ target: { value } }) => onchange(value)}
classname="has-input input-lg"
placeholder="enter email address"
aria-invalid={!!errors.email}
/>
)}
/>
<span classname="has-icon">
<i classname="ti-email"></i>
</span>
{errors.email && (
<span style={{ color: "red" }} role="alert">
required
</span>
)}
</formgroup>
<input type="submit" />
</form>
</div>
</div>
);
};
Source: stackoverflow.com
Related Query
- React Input with useForm onChange not firing
- onChange event not firing for input field with React
- React input type file onChange not firing
- checkbox onChange in <legend> inside disabled <fieldset> not firing in Firefox with React
- React hidden input type file onChange not firing
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- React hooks useState not updating with onChange
- How to make React input onChange set state only after onChange stops firing for set time?
- React Formik does not work with number input
- Why is my React checkbox onChange handler firing on render and then not when the box is clicked?
- React onChange functions with ES6 arrows or not
- React - setting input value with JavaScript does not trigger 'onChange'
- React slow with lots of textareas (but not text input fields)
- React with Fluent UI Form onChange not working (very simple code)
- Assert toHaveBeenCalledWith with a React input components onChange handler
- onChange callback not firing in React component
- React input onchange simulation not updating value using Jest and enzyme
- Using Lodash debounce with React useCallback for input onChange event
- React - Material UI - TextField controlled input with custom input component not working properly losing focus
- React onChange not working for input inside functional component
- Can't type in react Input Text Field - onChange not working properly
- Button input type submit not submitting in React with React Router
- Is there a way to set defaultValues in a child component using react hook form with useFieldArray hook - not using the useForm hook?
- react - input change not firing when select all to delete
- ReactJS onChange function not firing on entering input
- React hook form does not work with input from reactstrap
- Input not re-rendering onChange with hooks
- My onChange not working with react
- OnClick event of nested React component is not firing with Firefox or IE11
More Query from same tag
- SVG React Component will not center
- React-hooks-form - iterating through Field Array where one of the fields is set using useState
- How do I make "npm run start" exit with a code 0?
- Recharts: how is it possible to show only the value of ONE data point inside a Tooltip?
- Update state with spread operator
- Passing states to this.props.children using Nested Routes
- Array.length is undefined on data load causing error in react using hooks
- Can't see state inside method helper function using hooks
- How to set useState const to value of input on change
- How to update object property which is an array?
- How to fix babel react "Uncaught SyntaxError: Unexpected token <"
- TypeError: Cannot read property 'isRequired' of undefined (material ui )
- Creating test payment gateway with react and stripe
- How can I send React post requet with file data to an API?
- Web3 - Provider not set or invalid
- Weird behavior on array map after state update
- Adding a react component to a array in forEach does not render
- Best method of importing scss variables with React Styled-Components?
- React js component re-render two times in scroll event
- Merge has caused error saying I'm attempting to import runtime.js outside of src when the file structure hasn't changed
- Adding a dynamic link
- validateDOMNesting(...): <span> cannot appear as a child of <option>
- Checkbox in React Calculator
- Klarna checkout - using React & Node
- How can I tell if a function is a class?
- How can I add a transition between re-renders of a specific state value in React?
- React - Call props function inside of a components function
- Component not re-rendering in react
- Not able to find real difference between .jsx and js file
- How do you cancel and reset css animations in react?