(React.js) How to disable inputs until the previous input is enterred?-CodePudding

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!

CodePudding user response：

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