时间戳

首页 > 解决方案 > 如何在文件内的反应js中传递数据

reactjs - 如何在文件内的反应js中传递数据

问题描述

我在 ReactJs 中有下一个组件：

function App() {
function handleClick(e) {
    console.log('click ', e);
    localStorage.setItem('my-item', e.key);
    console.log(localStorage.getItem('my-item'))
  }
  return (
    <div>
      <Menu
        selectedKeys={e.key}   
        style={{ width: 500px}}
        onClick={handleClick}
      >
      ...another code

}

在那里我使用了 AntDesign。该函数handleClick在我的本地存储中写入key一个项目。它有效，但我想传递selectedKeys我在本地存储中传递的密钥，所以我想这样做selectedKeys={e.key}，但我不能这样做。如何将数据e.key从函数传递到<Menu>标签？

标签： reactjs

解决方案

使用 state 怎么样：

使用 React 钩子useState：

import React, { useState } from React;

然后

const [selectedKeys, setSelectedKeys] = useState([]);

然后

function handleClick(key) {
  localStorage.setItem('my-item', key);
  let newKeys = selectedKeys.slice(0); // you may need to clone the array
  newKeys.push(key);
  setSelectedKeys(newKeys); // or push it into an array if there is many.
}

您的Menu组件将如下所示：

<Menu
 mode="inline"
 selectedKeys={selectedKeys}   
 openKeys={openKeys}
 onOpenChange={onOpenChange}
 style={{ width: 500px}}
 onClick={() => handleClick(e.key)}>

全部一起 ：

import React, { useState } from React;

const App = () => {
  const [selectedKeys, setSelectedKeys] = useState([]);

  const handleClick = (key) => {
    localStorage.setItem('my-item', key);
    let newKeys = selectedKeys.slice(0); // you may need to clone the array
    newKeys.push(key);
    setSelectedKeys(newKeys); // or push it into an array if there is many.
  }

  return {
    <Menu
     mode="inline"
     selectedKeys={selectedKeys}   
     openKeys={openKeys}
     onOpenChange={onOpenChange}
     style={{ width: 500px}}
     onClick={() => handleClick(e.key)}>
  }
}

推荐阅读