在功能组件中的反应js中获取数组名称的值

Question

如何在基于功能组件的 React js 中获取输入名称数组的值。

这是我的代码

<form method="post" onSubmit={handleSubmit}>
   <input type="text" name="otp[]"  placeholder="0" className="form-control inputs"/>
   <input type="text" name="otp[]"  placeholder="0" className="form-control inputs"/>
   <input type="text" name="otp[]"  placeholder="0" className="form-control inputs"/>
   <input type="text" name="otp[]"  placeholder="0" className="form-control inputs"/>
   <button className="btn btn-default text-light pos-rel">Verify</button>
 </form>

提前致谢

Answer 1

你应该用状态存储输入值，为此我建议一个对象。

const [values, setValues] = useState({otp1: 0, otp2: 0, ...restOfTheInputs });

然后，您可以通过向输入添加 onChange 道具来在输入更改时触发状态更改。（您还应该为这些输入指定一个唯一的名称）

<input type="text" name="otp1" value={values.opt1} onChange={(e) => handleInput(e)} />

在此函数中，您将希望用输入的新值更新状态以替换任何旧值，同时保留其他输入的任何值。

const handleInput = (event) => {
    const {name, value} = event.target;
    setValues(currentValue => ({...currentValue, ...{name: value}}))
}

在功能组件中的反应js中获取数组名称的值

Get Value of array name in react js in functional componet

javascript

components

reactjs