如何解决React Hooks:如何处理地图中的多个 onChange 和 onClick 事件
我是 React 的新手。我从本地 json 文件导入数据。对于从数据生成的地图中的每个项目,我返回一个输入范围滑块和一个按钮。范围有一个 onChange 事件处理程序,按钮有一个 onClick 事件处理程序,两者都将更改应用于地图值,从而应用 <p className="text">
中文本的行为。如何处理事件以便将更改单独应用于每个 <p>
?例如,如果我移动 <input name="size"
并单击带有文本 <button name="align">
的 <p>
的 5.0
,它只会更改那个?在此先感谢您的帮助。
import React,{ useState,useEffect } from "react";
import axios from "axios";
import "./styles.css";
function App() {
const [kitchenItems,setkitchenItems] = useState([]);
useEffect(() => {
axios
.get("./data.json")
.then((response) => setkitchenItems(response.data.kitchen));
},[]);
const onAddTextCenter = () => {
setkitchenItems(
kitchenItems.map((item) => ({
...item,alignment: "text-center"
}))
);
};
function onSizeChange(evt) {
const sizeValue = evt.target.value;
setkitchenItems(
kitchenItems.map((item) => ({
...item,value: sizeValue
}))
);
}
return (
<main>
{kitchenItems.map((item,i) => (
<div key={i}>
<div className="fromData">
<input
type="range"
name="size"
min={item.min}
max={item.max}
value={item.value}
step={item.step}
onChange={onSizeChange}
></input>
<button
type="button"
name="align"
onClick={() => onAddTextCenter()}
>
Text Center
</button>
</div>
<div>
<p className={"text " + item.alignment}>{item.value}</p>
</div>
</div>
))}
</main>
);
}
export default App;
这是代码沙盒:https://codesandbox.io/s/quirky-gould-0rket
如果有人遇到类似的困境,这里有一个解决方案,感谢评论中的@Yousaf:
import React,[]);
const onAddTextCenter = (index) => {
const updatedData = kitchenItems.map((item,idx) => {
if (idx === index) {
return {
...item,alignment: "text-center"
};
}
return item;
});
setkitchenItems(updatedData);
};
function onSizeChange(index,event) {
const sizeValue = event.target.value;
const updatedData = kitchenItems.map((item,value: sizeValue
};
}
return item;
});
setkitchenItems(updatedData);
}
return (
<main>
{kitchenItems.map((item,i) => (
<div key={i}>
<div className="fromData">
<input
type="range"
name="size"
min={item.min}
max={item.max}
value={item.value}
step={item.step}
onChange={(event) => onSizeChange(i,event)}
></input>
<button
type="button"
name="align"
onClick={() => onAddTextCenter(i)}
>
Text Center
</button>
</div>
<div>
<p className={"text " + item.alignment}>{item.value}</p>
</div>
</div>
))}
</main>
);
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。