如何在反应中单击时将元素添加到数组？

Question

我的反应还很新（我只使用过 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;

Answer 1

我想你想要这样的东西？我还重构了代码的其他部分，例如handleChange，这看起来有点奇怪。

const Form = () => {
  const [recipe, setRecipe] = useState("");
  const [ingrediens, setIngrediens] = useState("");
  const [foodList, setFoodList] = useState([]);

  const handleChangeRecipe = event => {
    setRecipe(event.target.value);
  };
  const handleChangeIngredients = event => {
    setIngrediens(event.target.value);
  };
  const handleClick = event => {
    setFoodList([...foodList, { recipe: recipe, ingrediens: ingrediens }]);
  };

  console.log(foodList);
  return (
    <main>
      <button onClick={handleClick}>add</button>
      <div className="form">
        <input
          type="text"
          placeholder="Enter your recipe"
          name="recipe"
          onChange={handleChangeRecipe}
        />
        <input
          type="text"
          placeholder="Enter your ingrediens"
          name="ingrediens"
          onChange={handleChangeIngredients}
        />
      </div>

      <div className="results">
        <ul>
          {foodList.map((x, i) => (
            <li key={i}>
              {" "}
              {x.recipe} <p> {x.ingrediens} </p>{" "}
            </li>
          ))}
        </ul>
      </div>
    </main>
  );
};