Javascript 如何在React中将两个输入值添加到多维数组中？

假设我有以下数组：

从'react'导入{useState}；
const[products，setProducts]=useState([
{名称：“电视”，价格：1000}，
{名称：“手机”，价格：800}，
{名称：“笔”，价格：1}
])

您可以通过两种方法来实现这一点，我将在这里突出一种方法作为示例，并在下面提到其他方法

对于输入字段，您希望以状态存储值，对于功能组件，如下所示：

export const MyComponent=（）=>{
const[products，setProducts]=useState([
{名称：“电视”，价格：1000}，
{名称：“手机”，价格：800}，
{名称：“笔”，价格：1}
]);
const[name，setName]=useState（“”）；
const[price，setPrice]=useState（0）；
const addProduct=（）=>{
setProducts（[…products，{name，price}]）；
};
返回(
setName（e.target.value）}/>
setPrice（e.target.value）}/>
拯救
); 
};

在本例中，我们使用状态来控制输入值。您还可以使用作为子组件的多个输入使其更具动态性，并且可以一次添加多个输入。它是非常可扩展的

另一种方法是将

ref

存储到输入中，并在单击时获取值。一般来说，您可能希望作出反应来控制输入，但也有例外。您可以在此处阅读有关

ref

的更多信息：

---

关于语法的附加说明：在上面的示例中，我们使用向数组添加值。这将创建一个新数组，并有助于记住

产品

数组是不可变的，对它的更改不会反映在组件中。

首先，输入需要两种状态：

const [name,setName] = useState("");
const [price,setPrice] = useState(0);

现在，您必须将输入连接到您的状态：

<input placeholder="what ever" value={name} onChange={(e)=>{setName(e.target.vaklue)}} />

<input placeholder="what ever" value={price} onChange={e=>{setPrice(e.target.value)}} />

保存

嗨，卢卡斯，欢迎光临。发布当前正在运行的函数，将值添加到数组中，这样我们就可以帮助调试；）当您想将值推送到产品列表时，单击保存？这种方法的问题是，当用户添加产品名称（例如

笔记本电脑

）并点击保存时。products数组将有一个条目

{name:'laptop'，price:0}

。所以必须进行验证，这样用户才能保存，除非同时填写名称和价格。@Shyam是的，这是一个很好的观点。然而，这个问题并没有真正解决围绕这个功能的需求。按照要求，这可以处理请求的功能。OP可以根据需要自由添加其他验证和检查。为了不做假设，我故意让这个答案保持简单。例如，该按钮被称为

保存

，因此您可以假设他们正在提交表单，并且该表单还包含其他功能。为了回答这个问题，我没有对他们的应用程序做进一步的假设。

function handleSubmit(){
    setProduct([...products,{name,product}]);
}

<button onClick={handleSubmit}>Save</button>