gpt4 book ai didi

javascript - 管理状态并使用输入

转载 作者:行者123 更新时间:2023-12-03 14:22:05 24 4
gpt4 key购买 nike

我正在制作一个食谱盒应用程序,我决定从我的 handleTitlehandleInput 方法开始。我能够将其取出,但现在我想创建一个对象数组(对象包含标题和描述),然后我将映射该数组并显示数据。

但是我的 handleSubmit 函数没有按照我想要的方式工作。我希望用户能够编写多个标题和描述,并且这些标题和描述将不断添加到该州的食谱数组中。看一下代码:

import React, { useState } from "react";
import "./styles.css";

import { Form } from "./components/containers/Form";

export default function App() {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [recipe, setRecipe] = useState([]);

const handleTitle = e => {
setTitle(e.target.value);
};

const handleDescription = e => {
setDescription(e.target.value);
};

const handleSubmit = e => {
e.preventDefault();
if (title !== "" && description !== "") {
setRecipe(prevState => {
const data = { title: title, description: description };

return {
...prevState,
recipe: prevState.recipe.concat(data)
};
});
}
};

return (
<div className="App">
<Form
title={title}
description={description}
handleTitle={handleTitle}
handleDescription={handleDescription}
handleSubmit={handleSubmit}
/>
</div>
);
}
import React from "react";

export const Form = ({
handleTitle,
handleDescription,
handleSubmit,
title,
description
}) => {
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
onChange={handleTitle}
placeholder="title"
value={title}
/>

<input
type="text"
onChange={handleDescription}
placeholder="description"
value={description}
/>
<button>Add</button>
</form>
</div>
);
};

最佳答案

当您设置配方时,您正在将配方状态的原始类型更改为对象。相反,您应该只返回一个包含先前配方和新配方的新数组。

我在下面附加了一个可运行的示例:

const Form = ({
handleTitle,
handleDescription,
handleSubmit,
title,
description
}) => {
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
onChange={handleTitle}
placeholder="title"
value={title}
/>

<input
type="text"
onChange={handleDescription}
placeholder="description"
value={description}
/>
<button>Add</button>
</form>
</div>
);
};

function App() {
const [title, setTitle] = React.useState("");
const [description, setDescription] = React.useState("");
const [recipes, setRecipes] = React.useState([]);

const handleTitle = e => {
setTitle(e.target.value);
};

const handleDescription = e => {
setDescription(e.target.value);
};

const handleSubmit = e => {
e.preventDefault();
if (title !== "" && description !== "") {
setRecipes(prevState => {
const data = { title: title, description: description };
return [...prevState, data];
});
setTitle("");
setDescription("");
}
};

return (
<div className="App">
<Form
title={title}
description={description}
handleTitle={handleTitle}
handleDescription={handleDescription}
handleSubmit={handleSubmit}
/>
<h5>Recipes</h5>
{recipes.length === 0
? (
<div>No recipes</div>
)
: (
<ul>
{recipes.map(({ title, description }) => (
<li>
{title} : {description}
</li>
))}
</ul>
)}
</div>
);
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

关于javascript - 管理状态并使用输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61955693/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com