如何解决如何将 excel 表格中的 vaues 粘贴到表格并将其存储在 React 中?
我在 react 中创建了一个表,我必须从 Excel 工作表中粘贴这些值并将它们存储在一个状态中。我尝试过 onPaste 和 onInput 事件,但它只将工作表的最后一个值存储到状态中。
function App() {
const [label,setlabel] = useState({ labels: ["Lat [deg]","Long [deg]"] });
const [inputvalue,setinputvalue] = useState({
inputs: [
{ "Lat [deg]": "","Long [deg]": "" },{ "Lat [deg]": "",],});
const handlePaste = (index,elm,e,i) => {
return parse(e);
};
const handlePaste1 = (index,i) => {
const newList4 = inputvalue.inputs.map((item,i) => {
if (index === i) {
const updatedItem = {
...item,[elm]: e.target.value,};
console.log(updatedItem);
return updatedItem;
}
return item;
});
console.log("newList4",newList4);
setinputvalue((prevData) => ({
...prevData,inputs: newList4,}));
console.log("Input Value",inputvalue);
};
return (
<table>
<tr className="text-center">
{label.labels.map((elm,ind) => {
return (
<th
style={{
width: "150px",border: "1px solid black",backgroundColor: labelcolor.labelcolors[ind].color,}}
>
{elm}
</th>
);
})}
</tr>
{inputValues.inputs.map((res,index) => {
return (
<tr key={index}>
{label.labels.map((elm,i) => {
return (
<td
style={{
width: "150px",minHeight: "30px",borderRadius: "0px",wordWrap: "break-word",}}
>
<input
onInput={(e) => {
handlePaste1(index,i);
}}
onPaste={(e) => {
handlePaste(index,i);
}}
type="textBox"
className="text-center inputtextBox"
/>
</td>
);
})}
</tr>
);
})}
</table>
);
}
export default App;
在 handlePaste1 函数中,我在不同的元素中设置状态,即 Lat [deg] 和 Long [deg]。但我只得到 inputValue 状态中的最后一个值。
这是输入:-
所以这里的输入是 1 2 3 4
//The value in inputValue state I want:-
inputs: [
{ "Lat [deg]": "1","Long [deg]": "2" },{ "Lat [deg]": "3","Long [deg]": "4" },//The value in inputValue state I'm getting:-
inputs: [
{ "Lat [deg]": "",
代码沙盒链接:- Click here for live code
解决方法
问题
问题似乎与在单个渲染周期内对多个状态更新进行排队有关。似乎粘贴的每个单元格都会触发自己的状态更新,并且由于每次更新都是从渲染周期的状态值开始,因此更新被排入队列,因此每个后续更新都会覆盖之前的更新。最后更新是您看到的更新,例如您只看到更新的第四个单元格。
解决方案
将 handlePaste1
转换为使用功能状态更新,使其从前一个状态更新,而不是从前一个渲染周期的状态。
const handlePaste1 = (index,elm,e,i) => {
setinputvalue((inputvalue) => ({
...inputvalue,inputs: inputvalue.inputs.map((item,i) =>
index === i
? {
...item,[elm]: e.target.value
}
: item
)
}));
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。