I am working on an OTP page, and was trying if there is a way to clear input value for react-pin-input after user clicks on the submit OTP button.
<PinInput
ref={pintInputRef}
length={6}
secret
type="numeric"
inputMode="numeric"
onComplete={(value) => {
handleOnCompleteInput(value);
}}
autoSelect={true}
regexCriteria={/^[ A-Za-z0-9_#./#&+-]*$/}
/>
<Button
type="primary"
size="large"
block
htmlType="submit"
onClick={handleSubmit}
> Verify </Button>
const handleSubmit = () => {
// SET PIN INPUT TO EMPTY
}
I have tried useRef and set ref.current.value = "" but it does not work.
https://codesandbox.io/s/silly-shirley-dyqk65?file=/src/App.js
You can use useRef hook and ref prop of PinInput component:
Define a variable:
let ele = useRef();
Add ele.clear() on handleSubmit:
const handleSubmit = () => {
ele.clear();
};
Add ref to PinInput:
<PinInput
length={6}
secret
type="numeric"
inputMode="numeric"
onComplete={(value) => {
handleOnCompleteInput(value);
}}
autoSelect={true}
regexCriteria={/^[ A-Za-z0-9_#./#&+-]*$/}
ref={(n) => (ele = n)} /*Set ref */
/>
I want to disable the submit button on the form if the user enters a value that already exists in the task list.
'Todos' is the array that stores the list and I used 'some' to check if the input value is equal to some title. However, it doesn't work.
CODE
const [disable, setDisable] = useState(false);
const onFormSubimit = (event) => {
event.preventDefault();
if (!editTodo) { //mudar depois a condição
setTodos([...todos, {
id: uuidv4(),
title: input,
completed: false
}]);
setInput("");
} else {
updateTodo(input, editTodo.id, editTodo.completed);
}
}
const handleInputChange = (event) => {
let inputValue = event.target.value;
setInput(inputValue);
getInputValue(inputValue);
}
const getInputValue = (inputValue) => {
let some = todos.some(item => item.title === inputValue);
if (some!=disable) {
setDisable(true);
}
}
return (
<form onSubmit={onFormSubimit}>
<input type='text' name='text' placeholder='Insira o nome da tarefa' className='task-input' value={input} onChange={handleInputChange} required></input>
<button type='submit' className='button-add' disabled={getInputValue} >{editTodo ? 'Alterar' : 'Adicionar'}</button>
</form>
);
}
Your button state is dependent on input (the variable set by setInput) and todos. So the best way to handle this is via an useEffect with a dependency array.
useEffect(() => {
// Array.some returns a boolean
setDisable(todos.some(item => item.title === input))
}, [todos, input]);
Your button code
<button type='submit' className='button-add' disabled={disable} >{editTodo ? 'Alterar' : 'Adicionar'}</button>
You can also directly use this logic in button like below. In this case there is no need of useEffect
<button type='submit' className='button-add' disabled={todos.some(item => item.title === input)} >{editTodo ? 'Alterar' : 'Adicionar'}</button>
First, change your button with the code below (as it should be disabled ={disable}, not disabled={getInputValue}). And getInputValue as following.
<button type='submit' className='button-add' disabled={disable} >{editTodo ? 'Alterar' : 'Adicionar'}</button>
const getInputValue = (inputValue) => {
if (todos.some((item) => item.title === inputValue)) {
setDisable(true);
} else {
setDisable(false);
}
};
I am trying to create a button that add more input and remove input and when it remove the input it also clear all the data inside that input but the problem is when I remove that input but the data still stay. How can I fix that ?
Here is my code base:
const [inputs, setInputs] = useState(teamData.rules);
useEffect(() => {
setInputs(teamData.rules);
}, [teamData]);
// Add more input
const addInputs = () => {
setInputs([...inputs, { name: `rule-${inputs.length + 1}` }]);
};
// handle click event of the Remove button
const handleRemoveClick = (index) => {
const list = [...inputs];
list.splice(index, 1);
setInputs(list);
};
{inputs.map((data, index) => (
<div className="agreement-form-grid" key={index}>
<button
className="agreement-remove-button"
onClick={() => handleRemoveClick(index)}
>
<Remove />
</button>
<input
type="text"
defaultValue={teamData.rules[index]}
name={`rule_${index}`}
placeholder={`Rule ${index + 1}`}
onChange={handleChange}
/>
</div>
))}
{inputs.length !== 4 && (
<div className="team-agreement-add-rule">
<button type="submit" onClick={addInputs}>
<Add />
</button>
</div>
)}
Update question add handleChange function:
const handleChange = (event) => {
const { name, value } = event.target;
// Update state
setUpdateTeamData((prevState) => ({
...prevState,
[name]: value,
}));
}
Define another function in your parent component to clear the data like below,
const clearInput = (dataName) => {
setUpdateTeamData((prevState) => {
delete prevState[dataName];
return {
...prevState
}
});
}
In the child component, in the onClick of the remove button call this function as well
<button
className="agreement-remove-button"
onClick={() => { handleRemoveClick(index); clearInput(`rule_${index}`)}}
>
<Remove />
</button>
Before saving you can ignore empty inputs
In Formik, how to make the Reset button reset the form only after confirmation?
My code below still resets the form even when you click Cancel.
var handleReset = (values, formProps) => {
return window.confirm('Reset?'); // still resets after you Cancel :(
};
return (
<Formik onReset={handleReset}>
{(formProps) => {
return (
<Form>
...
<button type='reset'>Reset</button>
</Form>
)}}
</Formik>
);
Hello #Aximili you can use resetForm in onSubmit.
onSubmit={(values, { resetForm }) => {
// do your stuff
resetForm();
}}
what resetForm can do?
Imperatively reset the form. This will clear errors and touched, set isSubmitting to false, isValidating to false, and rerun mapPropsToValues with the current WrappedComponent's props or what's passed as an argument. The latter is useful for calling resetForm within componentWillReceiveProps.
I'm not completely certain, but I think you will have to write your own reset function without a button with a reset type. Something like this:
const handleReset = (resetForm) => {
if (window.confirm('Reset?')) {
resetForm();
}
};
function Example() {
return (
<Formik initialValues={{ value: 1 }}>
{formProps => {
return (
<Form>
<Field name="value" type="number" />
<button
onClick={handleReset.bind(null, formProps.resetForm)}
type="button"
>
Reset
</button>
</Form>
);
}}
</Formik>
);
}
If you really want to use onReset, I think the only way is to throw an error. The Formik source code seems to indicate resetForm() will be called no matter what your onReset() function returns.
const handleReset = () => {
if (!window.confirm('Reset?')) {
throw new Error('Cancel reset');
}
};
function Example() {
return (
<Formik initialValues={{ value: 1 }} onReset={handleReset}>
{formProps => {
return (
<Form>
<Field name="value" type="number" />
<button type="reset">
Reset
</button>
</Form>
);
}}
</Formik>
);
}
I would still go with the first solution though personally.
I understand OP's question was for Formik.
However, for anyone using useFormik hook and wanting to clear form on 'reset' button click, here's one way to achieve that.
<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>
My issue was I did not wanted to use window.confirm(). I wanted to use my own modal so I used
useFormikContext()
You can create a function component like this
let resetPresForm = {};// You will have to define this before useEffect
const ResettingForm = () => {
const { resetForm } = useFormikContext();
resetPresForm = resetForm; // Store the value of resetForm in this variable
return null;
};
Now Import this function component inside your
<Formik>
<button type="button" onClick={() => { setShowResetModal(true) }} className="comman-btn">Reset</button>
<ResettingForm />
</Formik>
Now on modal component confirm you can
const resetPrescriptionForm = () => {
setShowResetModal(false);
resetPresForm();
}
Reference
in 2023
formik.resetForm(); this worked for me.
here is the complete code for onSubmit event
onSubmit:(values)=>{
const name = values.name;
const mobile = values.mobile;
const website = values.website;
const service = values.service;
const msg = values.msg;
axios.post('/api/SendContactForm', {name, mobile, website, service, msg})
.then(function (response) {
//console.log(response);
toast.success('👋 Thanks for the message. We will contact you asap.');
formik.resetForm();
})
.catch(function (error) {
console.log(error);
formik.resetForm();
toast.error(error.message || error.statusText);
});
}
});
Here is the solution:
<Formik
initialValues={initialValues}
onSubmit={async (values, { resetForm }) => {
await onSubmit(values)
resetForm()
}}>
Reset the form on submit immediately.
I'm not using a custom wrapper around Formik.
I used actions.resetForm() and It resolved the problem.
onSubmit={(values, actions) => {
actions.resetForm();
}}
Here is my form and the onClick method. I would like to execute this method when the Enter button of keyboard is pressed. How ?
N.B: No jquery is appreciated.
comment: function (e) {
e.preventDefault();
this.props.comment({
comment: this.refs.text.getDOMNode().value,
userPostId:this.refs.userPostId.getDOMNode().value,
})
},
<form className="commentForm">
<textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br />
<input type="text" placeholder="userPostId" ref="userPostId" /> <br />
<button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
</form>
Change <button type="button" to <button type="submit". Remove the onClick. Instead do <form className="commentForm" onSubmit={onFormSubmit}>. This should catch clicking the button and pressing the return key.
const onFormSubmit = e => {
e.preventDefault();
// send state to server with e.g. `window.fetch`
}
...
<form onSubmit={onFormSubmit}>
...
<button type="submit">Submit</button>
</form>
It's been quite a few years since this question was last answered.
React introduced "Hooks" back in 2017, and "keyCode" has been deprecated.
Now we can write this:
useEffect(() => {
const listener = event => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
console.log("Enter key was pressed. Run your function.");
event.preventDefault();
// callMyFunction();
}
};
document.addEventListener("keydown", listener);
return () => {
document.removeEventListener("keydown", listener);
};
}, []);
This registers a listener on the keydown event, when the component is loaded for the first time. It removes the event listener when the component is destroyed.
Use keydown event to do it:
input: HTMLDivElement | null = null;
onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
// 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.onSubmit();
}
}
onSubmit = (): void => {
if (input.textContent) {
this.props.onSubmit(input.textContent);
input.focus();
input.textContent = '';
}
}
render() {
return (
<form className="commentForm">
<input
className="comment-input"
aria-multiline="true"
role="textbox"
contentEditable={true}
onKeyDown={this.onKeyDown}
ref={node => this.input = node}
/>
<button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
</form>
);
}
this is how you do it if you want to listen for the "Enter" key.
There is an onKeydown prop that you can use and you can read about it in react doc
and here is a codeSandbox
const App = () => {
const something=(event)=> {
if (event.keyCode === 13) {
console.log('enter')
}
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<input type='text' onKeyDown={(e) => something(e) }/>
</div>
);
}
import React, { useEffect, useRef } from 'react';
function Example() {
let inp = useRef();
useEffect(() => {
if (!inp && !inp.current) return;
inp.current.focus();
return () => inp = null;
});
const handleSubmit = () => {
//...
}
return (
<form
onSubmit={e => {
e.preventDefault();
handleSubmit(e);
}}
>
<input
name="fakename"
defaultValue="...."
ref={inp}
type="radio"
style={{
position: "absolute",
opacity: 0
}}
/>
<button type="submit">
submit
</button>
</form>
)
}
Enter code here sometimes in popups it would not work to binding just a form and passing the onSubmit to the form because form may not have any input.
In this case if you bind the event to the document by doing document.addEventListener it will cause problem in another parts of the application.
For solving this issue we should wrap a form and should put a input with what is hidden by css, then you focus on that input by ref it will be work correctly.
If you don't have the form inside <form>, you could use this in componentDidMount():
componentDidMount = () => {
document.addEventListener("keydown", (e) =>
e.code === "Enter" && console.log("my function"))
}
componentDidMount() //<-- remove this, it's just for testing here
useEffect(() => {
const keyEnter = event => {
if (event.key === 'Enter') {
event.preventDefault()
}
}
document.addEventListener('keydown', keyEnter)
return () => {
document.removeEventListener('keydown', keyEnter)
}
}, [])
I've built up on #user1032613's answer and on this answer and created a "on press enter click element with querystring" hook. enjoy!
const { useEffect } = require("react");
const useEnterKeyListener = ({ querySelectorToExecuteClick }) => {
useEffect(() => {
//https://stackoverflow.com/a/59147255/828184
const listener = (event) => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
handlePressEnter();
}
};
document.addEventListener("keydown", listener);
return () => {
document.removeEventListener("keydown", listener);
};
}, []);
const handlePressEnter = () => {
//https://stackoverflow.com/a/54316368/828184
const mouseClickEvents = ["mousedown", "click", "mouseup"];
function simulateMouseClick(element) {
mouseClickEvents.forEach((mouseEventType) =>
element.dispatchEvent(
new MouseEvent(mouseEventType, {
view: window,
bubbles: true,
cancelable: true,
buttons: 1,
})
)
);
}
var element = document.querySelector(querySelectorToExecuteClick);
simulateMouseClick(element);
};
};
export default useEnterKeyListener;
This is how you use it:
useEnterKeyListener({
querySelectorToExecuteClick: "#submitButton",
});
https://codesandbox.io/s/useenterkeylistener-fxyvl?file=/src/App.js:399-407
I have found this to be easier.
Listen for the keyDown event on the input you want to submit by pressing 'Enter" key and handle the submit action with conditional ternary operator as show below in a single line.
This is mostly used on subscribing a newsletter where there's no need of a button to submit.
Hope it helps.
<input
type="email"
placeholder="Email"
onKeyDown={e => e.key === 'Enter' ? handleSubmit : ''} />
You can use <button type='submit'></button> with nothing in the middle.
here is very optimised code
useEffect(() => {
document
.getElementById("Your-element-id")
.addEventListener("keydown", function (event) {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
document.getElementById("submit-element").click();
}
});
}, []);
use mousetrap
https://www.npmjs.com/package/mousetrap
https://www.npmjs.com/package/#types/mousetrap
(yeah, I know, unfortunatelly when You use typescript u have to install types aside from basic module)
import {bind} from 'mousetrap';
const handleSubmit = async () => {
// submit func here
};
bind(['enter', 'return'], handleSubmit);
other example of using mousetrap, maybe for other purpose:
bind(['command+k', 'ctrl+k'], function(e) {
highlight([11, 12, 13, 14]);
return false;
});
So, I was looking for some solution around the same scenario where on the login page, after a user hits(press) enter button from keyboard should trigger login process.
You can configure the textbox with one of code,
<input
// rest your code
onKeyPress={ onkeyup }
/>
Please keep in mind I am using react hooks to achieve it, apart from that this link will help you understand more enter key event handler
Try this enter code here:
const enterKye=()=>{
if(e.key==="Enter"){
alert("hello");
}
}
<input type="text" onKeyPress={enterKye}>
You may approach this problem like this.
onKeyPress={e => e.key === 'Enter' && handleFormSubmit}
You can change only button type => button to submit
<form
onSubmit={e => {
e.preventDefault();
handleSubmit(e);
}}
>
<input
name="developers"
defaultValue="submit"
ref={dev}
type="radio"
/>
<button type="submit">
submit
</button>
</form>
for example next React+TS code(add use hooks for state and etc):
type Props = {
...any properties
} & [any other type if need]
//I want notice that input data type of component maybe difference from type of props
const ExampleComponent: React.FC<Props> = (props: [Props or any other type]){
const anySerice = new AnyService();
const handleSubmit = async (eventForm) => {
await anySerice.signUp();
}
const onKeyUp = (event: KeyboardEvent) => {
//you can stay first condition only
if (event.key === 'Enter' || event.charCode === 13) {
handleSubmit(event)
}
}
...other code
return (<Form noValidate validated={validated} className="modal-form-uthorize" onKeyPress={onKeyUp}>
...other components form
</Form>)
}
export default ExampleComponent;
I solved this problem by sent autoFocus property in button
<button autoFocus={true}></button>