如何在React中单击向数组添加元素？
我对react很陌生（我只使用过abit类），我想把输入值添加到foodlist并在屏幕上写出来，但我的大脑被锁住了，我不知道如何...
import React, {useState, useEffect} from 'react';
const Form = () => {
const [recipe, setRecipe] = useState("");
const [ingrediens, setIngrediens] = useState("");
const [foodList, setFoodList] = useState([])
const handleChange = event => {
setIngrediens({[event.target.name]: event.target.value})
setRecipe({[event.target.name]: event.target.value})
}
const handleClick = event => { // Here is where i get problem
}
return (
<main>
<button onClick={handleClick}>add</button>
<div className="form">
<input type="text" placeholder="Enter your recipe" name="recipe" onChange={handleChange} ></input>
<input type="text" placeholder="Enter your ingrediens" name="ingrediens" onChange={handleChange} ></input>
</div>
<div className="results">
<ul>
{foodList.map(i => (
<li key={i}> {recipe} <p> {ingrediens} </p> </li>
))}
</ul>
</div>
</main>
)
}
export default Form;
共有1个答案
您需要用新数组更新foodList状态挂钩：
const handleClick = event => {
setFoodList([...foodlist, { new element values }]);
}
差不多就是这样，如果更新状态，组件将重新呈现并显示更新后的foodList
-
问题内容： 我有以下代码： 这两个附录未编译。那将如何正常工作？ 问题答案： 数组的大小无法修改。如果需要更大的数组，则必须实例化一个新数组。 更好的解决方案是使用可以根据需要增长的容器。如果你需要此形式的数组，该方法将为你提供数组。 如果需要将其转换为简单数组… 但是，使用数组执行的大多数操作也可以使用此ArrayList进行：
-
问题内容： 假设我有一个数组，例如： 然后我想将一个元素推/追加到所述数组的末尾，以获得： 我应该使用哪种方法？ 那我想在数组的 前面 添加一个元素呢？是否有固定的时间班次？ 问题答案： 从 Swift 3/4/5开始 ，操作如下。 向数组末尾添加新元素。 将另一个数组附加到数组的末尾。 向您的数组中插入一个新元素。 将另一个数组的内容插入到数组中。 更多信息可以从第110页开始的“ Swift编
-
当我点击一个座位时，如何防止重复，这样当我再次点击它时，它就不会追加，而是连续删除/添加。 参见输出的图片
-
当我点击一个座位时，如何防止重复，这样当我再次点击它时，它就不会追加，而是连续删除/添加。 参见输出的图片
-
所以我有一个Vue2应用程序。我已经创建了一个组件"u按钮" 当我导入它并在另一个组件中使用它时，我希望能够向它添加一个单击功能。然而，目前它在u按钮组件上寻找函数，而不是它正在使用的组件。 例如，在下面，如果我点击第一个按钮什么也没发生，如果我点击第二个按钮，我得到控制台日志。 但是，如果我在u按钮组件上添加一个方法，那么它将调用该方法。那么，我怎样才能让我下面的例子起作用呢？我唯一能想到的就是
-
我想知道如何在数组末尾添加或追加一个新元素。有什么简单的方法可以在末尾添加元素吗？我知道如何使用StringBuffer，但我不知道如何使用它在数组中添加元素。我更喜欢没有ArrayList或List。我想知道StringBuffer是否能处理整数。