单击按钮时将数据从父组件传递到子组件答案

【问题标题】：Passing data from parent component to child component on button click单击按钮时将数据从父组件传递到子组件
【发布时间】：2021-06-11 06:07:06
【问题描述】：

我是 React 新手。我想要实现的是在父组件中单击按钮并将一些数据从父组件传递给子组件时呈现一个新组件。我能够从父母导航到孩子，但我无法传递数据。下面是我的代码的简化版本。我的父组件 - Posts.js

    const Posts = (props) => {
      const { posts, loading } = props;
      var nameArray = posts.map(function (el) {
        return el.kiosk_name;
      });
      console.log(nameArray);
      if (loading) {
        return <h2>Loading All Kiosks....</h2>;
      }
      return (
        <div>
          <Link to={`/kiosks/addkiosk`}>
            <button className="AddBtn" onClick={nameArray}>ADD</button>
          </Link>
)}

子组件 - AddKiosk.js

export const AddKiosk = (props) => {
  const { nameArray } = props;
  console.log(nameArray);
}

我正在尝试从 onClick 传递 nameArray，但 AddKiosk 的控制台日志显示 - Undefined。请让我知道我哪里错了。对不起，如果我的问题很琐碎。提前致谢。

【问题讨论】：

标签： reactjs onclick react-props react-functional-component

【解决方案1】：

我假设您正在使用 react-router-dom，当您单击 ADD 按钮时，它会将您带到 URL /kiosks/addkiosk 并呈现 AddKiosk 组件。

预期：

您想将nameArray 数据发送到AddKiosk 组件。

解决办法：

您可以使用Link 的to 属性将一些数据作为位置状态 传递。你可以阅读this related post。

代码

const Posts = (props) => {
  const { posts, loading } = props
  var nameArray = posts.map(function (el) {
    return el.kiosk_name
  })
  console.log(nameArray)

  if (loading) {
    return <h2>Loading All Kiosks....</h2>
  }

  return (
    <div>
      <Link to={{
        pathname: `/kiosks/addkiosk`,
        state: nameArray // HERE, passing data using Link
      }}>
        <button className="AddBtn">
          ADD
        </button>
      </Link>
    </div>
  )
}

export const AddKiosk = (props) => {
  const location = useLocation()
  console.log(location.state) // HERE, it will print data
  return <>i am AddKiosk</>
}

【讨论】：