我找不到在包含数组的对象字段中动态输入值的方法

Question

这是对象。我如何通过在react中动态在listItem键中输入fyage falue

 { 
   name: "", 
   dueDate: "", 
   grossAmount: "", 
   billNo: "", 
   billDate: "" ,
   listItem:[{ productName: "", quantity: null, price: null, amount: null, gstRate: null}], 
   gstAmount: null, 
   netAmount: null, 
   notes: "", 
   status: " "
}

Answer 1

假设对象使用您可以执行的USESTATE挂钩存储在状态中

const [obj,setObj] = useState({ 
       name: "", 
       dueDate: "", 
       grossAmount: "", 
       billNo: "", 
       billDate: "" ,
       listItem:[{ productName: "", quantity: null, price: null, amount: null, gstRate: null}], 
       gstAmount: null, 
       netAmount: null, 
       notes: "", 
       status: " "
    })

。。

状态输入：

const [productName,setProductName] = useState("");

对于输入，您可以执行这样的操作。注意：我只是为了更改productName而这样做，但是您可以为OBJ的任何其他键执行此操作。

<form>
  <input type="text" onChange={(e)=>setProductName(e.target.value)} />
  <button onClick={()=>setObj({...obj,lastItem:[...lastItem[0],productName]})}></button>
</form>

Answer 2

首先将名称属性属于您的输入元素。然后创建一个onChangeHandler函数。此功能可以处理您拥有的每个输入的所有更改。
您的输入（名称属性应与您的对象密钥相同）：

<input name='dueDate' onChange={onChangeHandler} type="text" value={myObject.dueDate} />

onChangeHandler函数：

const onChangeHandler = (event) => {
    myObject = {
        return {...myObject, [event.targer.name]: event.targer.value}
    }
}