Question

我有这个 CreateArea 组件，我在其中收集用户输入的数据，并使用 setNote 在 notes 数组中本地设置其状态。

我想要做的是能够在 CreateArea 组件下方显示与我的 notes 数组中的项目一样多的 Note 组件。

但我的困惑是我在 CreateArea 组件中有这个有状态数组，但我需要在父 App 组件中访问它，以便我可以呈现这些 Note 组件。

如何在我的数组中创建尽可能多的 Note 组件，也就是如何在父 App 组件中访问该数组？

import React from "react";

function CreateArea() {
  const [notes, setNote] = React.useState([
    {
      title: "",
      content: ""
    }
  ]);

  function handleChange(event) {
    const value = event.target.value;
    setNote({
      ...notes,
      [event.target.name]: value
    });
    console.log(notes);
  }

  function handleClick(event) {
    event.preventDefault();
    console.log(notes);
  }

  return (
    <div>
      <form>
        <input
          value={notes.title}
          onChange={handleChange}
          name="title"
          placeholder="Title"
        />
        <textarea
          value={notes.content}
          onChange={handleChange}
          name="content"
          placeholder="Take a note..."
          rows="3"
        />
        <button onClick={handleClick}>Add</button>
      </form>
    </div>
  );
}

export default CreateArea;

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {

  return (
    <div>
      <Header />
      <CreateArea />
      <Note 
        title="title"
        content="content"
      />
      <Footer />
    </div>
  );
}

export default App;

Answer 1

可能有很多方法可以获得您正在寻找的结果。我想到的第一个是使用回调。（这可能会被误导，因为没有表示其他元素如何呈现的某些上下文）。这个例子很粗糙，但我希望它提供一些价值：

function CreateArea(callback) {

  function handleChange(event) {
    const value = event.target.value;
    callback({
      ...notes,
      [event.target.name]: value
    });
  }

  return (
    <div>
      <form>
        <input
          value={notes.title}
          onChange={handleChange}
          name="title"
          placeholder="Title"
        />
        <textarea
          value={notes.content}
          onChange={handleChange}
          name="content"
          placeholder="Take a note..."
          rows="3"
        />
        <button onClick={handleClick}>Add</button>
      </form>
    </div>
  );
}

function App() {
  const [notes, setNote] = React.useState({});

  return (
    <div>
      <Header />
      <CreateArea callback={setNote} />
      <div>
        {notes.map(note => <Note
          title="title"
          content={note}
        />)}
      </div>
      <Footer />
    </div>
  );
}

如何将有状态数组从子组件传递到父组件？反应钩子

1 个答案: