javascript - 在 React 中管理同级组件之间的许多输入 - 最佳方法？

Question

我是这个话题的新手。

在父组件 App 中，我有两个 sibling :SideMenu 和 Document

这个想法是用户输入值(SideMenu)，这些值将在文档上重新显示。将有超过20个输入。由于这是我第一次进行这种状态管理，对于这种项目尝试，最好或最简单的方法是什么。

function App() {
const [fullName, setFullName] = useState("")
const [address, setAddress] = useState("")
  return (
      <div className='app'>
        <SideMenu />
        <Document />
      </div>
  )
}
export default App 

const SideBar = () => {
  return (
    <div>
      <div className='input-group'>
        <label>Full Name:</label>
        <input type='text' />
      </div>
      <div className='input-group'>
        <label>Address:</label>
        <input type='text' />
      </div>
    </div>
  )
}

const Document = () => {
  return (
    <div>
      <h1>{fullName}</h1>
      <p>{address}</p>
    </div>
  )
}

Answer 1

您可以为您的表单创建一个对象并将表单输入存储在该对象中。根据您的子组件，共享状态可以存储在最接近和最常见的组件中(在您的情况下，这是您的父组件)。 [1]

当您从子组件进行更新时，共享状态的其他子组件将被同步并且您的状态将被更新。除非需要设置全局状态，否则不应使用 redux 之类的状态管理工具。

我对你的例子做了修改，这个场景允许你将父组件中的状态传递给子组件，并从子组件更新父组件中的状态。

我在父组件中使用了一个通用的事件处理程序，这个函数捕获 html 事件，我们解析这个事件并通过这个函数更新状态。 [2][3]

import "./styles.css";
import { useState } from "react";

import SideBar from "./SideBar";
import Document from "./Document";

export default function App() {
  const [values, setValues] = useState({
    fullName: "",
    address: "",
    postalCode: ""
  });

  function handleChange(event) {
    setValues({ ...values, [event.target.name]: event.target.value });
  }

  return (
    <div className="app">
      <SideBar values={values} setValues={handleChange} />
      <Document values={values} setValues={handleChange} />
    </div>
  );
}

export default function Document({ values }) {
  return (
    <div>
      <h1>Document</h1>
      <p>Full Name: {values.fullName}</p>
      <p>Address: {values.address}</p>
      <p>Postal Code: {values.postalCode}</p>
    </div>
  );
}

export default function Sidebar({ setValues }) {
  return (
    <div>
      <div className="input-group">
        <label>Full Name:</label>
        <input type="text" name="fullName" onChange={setValues} />
      </div>
      <div className="input-group">
        <label>Address:</label>
        <input type="text" name="address" onChange={setValues} />
      </div>
      <div className="input-group">
        <label>Address:</label>
        <input type="text" name="postalCode" onChange={setValues} />
      </div>
    </div>
  );
}

代码沙盒链接:https://codesandbox.io/s/stackoverflow-74961591-wpmcnd

[1]:将 Props 传递给组件:https://beta.reactjs.org/learn/passing-props-to-a-component

[2]:更新状态中的对象:https://beta.reactjs.org/learn/updating-objects-in-state

[3]:HTML 更改事件:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event