0
368
Views(React.js) How to disable inputs until the previous input is enterred?
I have an input element returned by an Array of strings like the image below. How can I write the input component so that the subsequent inputs are disabled until the current input is entered by the user? Users can only start with the input from the top left then move to the right accordingly.
function() {
return (
<div>
{strArr.map((item, index) => (
<input />
))}
</div>
)}
Thanks for your help!
·
Juan Pablo Isaza
1 answers
Answer question0
- First of all set state and call it like isActive
- Second, give your input an identifier like id that can be equal to the current
- So, by default, your state will be initialized with 0;
- Set disabled property of your input dynamically, if isActive is not equal to the current state it gonna be disabled,
function() {
const [isActive, setIsActive] = React.useState(0);
const handleOnInputChange = (index)=>{
setIsActive(index+1)
}
return (
<div>
{strArr.map((item, index) => (
<input ket={index} id={index} disabled={isActive !== index} onChange={()=>handleOnInputChange(index)}/>
))}
</div>
)}
- This gonna work if you have only to write a single character in your input
·
Juan Pablo Isaza
Report
Answer question