0
125
ViewsCheck Input as its being typed ReactJS
I would like to check an input as it's being typed, without pressing a key or a button asynchronously.I would like to set a variables value to true if a person has typed more than 4 letters.
I think it would also be fine if the value sets to true (if the value is 4 or more letters) after the user clicks outside the inputbox , but I prefer the former
Mock Code
var hasTypedMoreThan4Letters = false; //changes to true when more than 4 letters are typed in inp1
<input type="text" className="input1" id="inp1" onChange={onTypingMoreThan4Letters}/>
Not sure if it helps but Mock Image below
3 answers
Answer question0
You need controlled components(controlled input). Here is my version using hooks. You get the number of symbols entered in count variable.
import "./styles.css";
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
function handleInput(e) {
setInput(e.target.value);
setCount((prev) => prev + 1);
}
const [input, setInput] = useState("");
return (
<div className="App">
<input value={input} onInput={handleInput} />
<p>{count}</p>
</div>
);
}
0
You could probably do something like this. This will check if more than 4 letters have been typed and display a message if hasMore is true.
import React from 'react';
export default function App() {
const [hasMore, setHasMore] = React.useState(false)
const [val, setVal] = React.useState("");
const hasTypedMoreThan4Letters = (e)=>{
setHasMore(e.target.value.length > 4)
setVal(e.target.value)
}
return (
<div className="App">
<input type="text" className="input1" id="inp1" value={val} onChange={hasTypedMoreThan4Letters}/>
{hasMore && (
<h1> has more than 4 letters</h1>
)}
</div>
);
}
0
I don't see a reason you should have a second state for the length of the value.
function App() {
const [value, setValue] = useState('');
const hasTypedMoreThan4Letters = value.length > 4;
const handleChange = (event) => {
setValue(event.target.value);
}
return <input onChange={handleChange} value={value} />;
}