javascript - 无法将 prop 传递回父组件

Question

我正在做一个简单的测试，其中父组件中有一个 name 状态，当单击子组件中的按钮时，我会更新该状态。但这不起作用，我很困惑我是否做错了什么。

父级:

import React from "react";
import "./styles.css";
import Hello from "./Hello";

export default function App() {
  const [name, setName] = React.useState();

  const handle = item => {
    setName(item);
  };

  console.log(name);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Hello test={handle} />
      {name}
    </div>
  );
}

child :

import React from "react";

export default function App() {
  return (
    <div>
      <button onclick={() => this.props.test("TEST")}>Activate Lasers</button>
    </div>
  );
}

我做错了什么？

Answer 1

将函数作为 prop 传递。

import React from "react";

export default function App({ handle }) {
  return (
    <div>
      <button onClick={() => handle('TEST')}>Activate Lasers</button>
    </div>
  );
}

并像这样渲染组件

<Hello handle={handle} />

// Get a hook function
const {useState} = React;

function Hello({ handle }) {
  return (
    <div>
      <button onClick={() => handle('TEST')}>Activate Lasers</button>
    </div>
  );
}

function App() {
  const [name, setName] = React.useState();

  const handle = item => {
    setName(item);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Hello handle={handle} />
      {name}
    </div>
  );
}


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>