In the following code there are three questions with some checkboxes. There is only one form and the questions change content based on a count state. The values of the chosen checkboxes is saved and displayed in another component.
When I click on the next button I would like to get the new question and the checkboxes to reset. Currently if I check one of the checkboxes and click next, the checkbox still remains checked for the next question. Is it possible to remove the checked state on button click in this scenario?
import React from "react";
import questionsData from "../questions-data";
function AddQuestions({ onAddTwo }) {
const [userinfo, setUserInfo] = React.useState({
options: [],
response: [],
});
const handleChange = (e) => {
// Destructuring
const { value, checked } = e.target;
const { options } = userinfo;
checked === true
? setUserInfo({
options: [...options, value],
response: [...options, value],
})
: setUserInfo({
options: options.filter((e) => e !== value),
response: options.filter((e) => e !== value),
});
};
///submits to list
const [count, setCount] = React.useState(0);
const data = questionsData.data.option;
const ask = data[count].ask;
const one = data[count].one;
const two = data[count].two;
const three = data[count].three;
const onSubmitTwo = (e) => {
e.preventDefault();
console.log("clicked")
const daas = userinfo.response;
!daas.length ? console.log("empty") : onAddTwo({ daas });
!daas.length ? alert("please add task") : setCount(count + 1);
};
//button func
const stylesNext = {
display: count > 2 ? "none" : " ",
};
return (
<>
<form>
<div className="one">
<legend>{ask}</legend>
<input className= "check--input"
type="checkbox"
name= "option"
value={one}
checked ={choice}
onChange={handleChange} />
<label htmlFor="check--input">{one}</label>
<input className="check--input"
type="checkbox"
name="option"
value={two}
onChange={handleChange} />
<label htmlFor="check--input">{two}</label>
<input className="check--input"
type="checkbox"
name="option"
value={three}
onChange={handleChange} />
<label htmlFor="check--input">{three}</label>
</div>
<div className="control--btns">
<button className="next--btn" onClick={onSubmitTwo} style={stylesNext}>
{count === 2 ? "Submit" : "Next"}
</button>
</div>
</form>
);
}
export default AddQuestions;
```
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
Application:
Search bar with two text input fields (input1, input2)
Three buttons: SearchX, SearchY, Clear results
Both the searches can take input1 and input2 as parameters to give two different results.
There's a result component which takes both the inputs, action and renders the search component depending on the action.
function TestComponent() {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [action, setAction] = useState(null);
const onInput1Change = evt => setInput1(evt.target.value);
const onInput2Change = evt => setInput2(evt.target.value);
return (
<div>
<input type="text" value={input1} onChange={onInput1Change} />
<input type="text" value={input2} onChange={onInput2Change} />
<button type="button" onClick={() => setAction('SearchX')}>
SearchX
</button>
<button type="button" onClick={() => setAction('SearchY')}>
SearchY
</button>
<button type="button" onClick={() => setAction('Clear results')}>
Clear results
</button>
<ResultComponent input1={input1} input2={input2} action={action} />
</div>
);
}
function ResultComponent({ input1, input2, action }) {
if (action === 'SearchX') {
return <SearchX input1={input1} input2={input2} />;
}
if (action === 'SearchY') {
return <SearchY input1={input1} input2={input2} />;
}
if (action === 'Clear results') {
return null;
}
return null;
}
function SearchX({ input1, input2 }) {
const [result, setResult] = useState(null);
useEffect(() => {
// Fetch and process X-way to get the result. Using timeout to simulate that
const id = window.setTimeout(() => setResult(`Search X result with inputs: ${input1}, ${input2}`), 3000);
return () => window.clearInterval(id);
}, [input1, input2]);
return <div>{result}</div>;
}
function SearchY({ input1, input2 }) {
const [result, setResult] = useState(null);
useEffect(() => {
// Fetch and process Y-way to get the result. Using timeout to simulate that
const id = window.setTimeout(() => setResult(`Search Y result with inputs: ${input1}, ${input2}`), 3000);
return () => window.clearInterval(id);
}, [input1, input2]);
return <div>{result}</div>;
}
ReactDOM.render(<TestComponent />, document.getElementById('root'));
Problem:
We want the search to initiate only when a button is clicked. With below code, after the first search result, as soon as you change your input, the result component expectedly re-renders thereby initiating search again without button click
Steps to reproduce the problem:
Enter "input1" in first text box
Enter "input2" in second text box
Hit on "SearchX"
After 3 seconds you should see something like "Search X result with inputs: input1, input2"
Change any of the input boxes. Need not press enter.
After 3 seconds, the result would change without button click
Possible option:
Planning to use React.memo hook to compare action prop before updating the result component. Action prop can only change on button clicks and hence can solve the problem.
Question:
Is there any other way (any other hooks etc.) to solve the problem?
Or is there any other process/design that I can follow to avoid memo ?
You could, upon input interaction, reset the action back to null. This will clear out the current result and not trigger a "search".
function TestComponent() {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [action, setAction] = useState(null);
const onInput1Change = evt => {
setInput1(evt.target.value);
setAction(null);
};
const onInput2Change = evt => {
setInput2(evt.target.value)
setAction(null);
};
return (
<div>
<input type="text" value={input1} onChange={onInput1Change} />
<input type="text" value={input2} onChange={onInput2Change} />
<button type="button" onClick={() => setAction('SearchX')}>
SearchX
</button>
<button type="button" onClick={() => setAction('SearchY')}>
SearchY
</button>
<button type="button" onClick={() => setAction(null)}>
Clear results
</button>
<ResultComponent input1={input1} input2={input2} action={action} />
</div>
);
}
EDIT Use html5 forms to save input and set action upon submit. When inputs are interacted with the inputs in state aren't updated until form is submitted.
function TestComponent() {
const [input1, setInput1] = useState("");
const [input2, setInput2] = useState("");
const [action, setAction] = useState(null);
return (
<div>
<form
id="searchX"
onSubmit={e => {
e.preventDefault();
setInput1(e.target.inputX.value);
setAction("SearchX");
}}
/>
<form
id="searchY"
onSubmit={e => {
e.preventDefault();
setInput2(e.target.inputY.value);
setAction("SearchY");
}}
/>
<input id="inputX" form="searchX" type="text" />
<input id="inputY" form="searchY" type="text" />
<input form="searchX" type="submit" value="SearchX" />
<input form="searchY" type="submit" value="SearchY" />
<button type="button" onClick={() => setAction(null)}>
Clear results
</button>
<ResultComponent input1={input1} input2={input2} action={action} />
</div>
);
}
Also, setting the "clear results" button action back to null saves a conditional check in ResultComponent, which simplifies to:
function ResultComponent({ input1, input2, action }) {
if (action === 'SearchX') {
return <SearchX input1={input1} input2={input2} />;
}
if (action === 'SearchY') {
return <SearchY input1={input1} input2={input2} />;
}
return null;
}
You can use refs to inputs and only update state on button click.
export default function TestComponent() {
const [input1, setInput1] = useState("");
const [input2, setInput2] = useState("");
const [action, setAction] = useState(null);
const input1Ref = useRef(null);
const input2Ref = useRef(null);
const onButtonClick = () => {
if (input1Ref.current) {
setInput1(input1Ref.current.value);
}
if (input2Ref.current) {
setInput2(input2Ref.current.value);
}
};
const onSearchXClick = () => {
onButtonClick();
setAction("SearchX");
};
const onSearchYClick = () => {
onButtonClick();
setAction("SearchX");
};
return (
<div>
<input ref={input1Ref} type="text" />
<input ref={input2Ref} type="text" />
<button type="button" onClick={onSearchXClick}>
SearchX
</button>
<button type="button" onClick={onSearchYClick}>
SearchY
</button>
<button type="button" onClick={() => setAction("Clear results")}>
Clear results
</button>
<ResultComponent input1={input1} input2={input2} action={action} />
</div>
);
}
I was trying to implement focus for the Submit button with Ref. I wanted to omit refering elements by ID.
import React, { useRef } from 'react'
import PropTypes from 'prop-types'
export const LabelComponent = () => {
const createButton = enableCreateButton()
? <button ref={(input) => { this.createLabelBtn = input }} >Submit</button>
: <button disabled ref={(input) => { this.createLabelBtn = input }} >Submit</button>
const createLabelBtn = useRef();
const focusCreateBtn = (e) => {
if ((e.key === 'Enter') && (newLabel.name !== '')) {
this.createLabelBtn.focus();
}
};
return (
<div className='create-label-container'>
<input type='text'
onKeyDown={(e) => { focusCreateBtn(e) }}
/>
{createButton}
</div>
)
}
It gives following error.
Uncaught TypeError: Cannot set property 'createLabelBtn' of undefined
Uncaught TypeError: Cannot set property 'createLabelBtn' of undefined
What could be the issue here.?
Functional components are instanceless, therefore, no this to bind anything to or call upon. Set the ref prop on the button as so ref={createLabelBtn}, and to set the focus you need to access createLabelBtn.current to get at the current value of the ref.
export const LabelComponent = ({ enableCreateButton }) => {
const createLabelBtn = useRef(null);
const focusCreateBtn = e => {
if (e.key === "Enter") {
createLabelBtn.current.focus();
}
};
return (
<div className="create-label-container">
<input type="text" onKeyDown={focusCreateBtn} />
<button
// upon being focused upon, console log proof
onFocus={() => console.log("Submit Focused!")}
disabled={!enableCreateButton}
ref={createLabelBtn}
>
Submit
</button>
</div>
);
};
Try this
import React, { useRef, useState } from "react";
const LabelComponent = () => {
const [name, setName] = useState("");
const createButton = true ? (
<button
ref={input => {
createLabelBtn.current = input;
}}
>
Submit
</button>
) : (
<button
disabled
ref={input => {
createLabelBtn.current = input;
}}
>
Submit
</button>
);
const createLabelBtn = useRef();
const focusCreateBtn = e => {
if (e.key === "Enter" && name !== "") {
createLabelBtn.current.focus();
}
};
return (
<div className="create-label-container">
<input
type="text"`enter code here`
value={name}
onChange={e => {
setName(e.target.value);
}}
onKeyDown={e => {
focusCreateBtn(e);
}}
/>
{createButton}
</div>
);
};
export default LabelComponent;
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>