從反應功能組件中的道具更改中設置 state？

Question

我有簡單的反應功能組件看起來像下面的代碼

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

export default function App() {
  return (
    <div className="App">
      <Test
        children={
          <React.Fragment>
            <label>Name: </label>
            <input type="text" onChange={(e) => setData(e)} /> 
          </React.Fragment>
        }
      />
    </div>
  );
}

export function Test({ children }) {
  const [data, setData] = useState("");
  return (
    <>
      <div>{children && children}</div>
      <div>{data}</div>
    </>
  );
}

我的問題是如何在 onChange 事件觸發時更新Test組件內的data state？ 這里是沙盒

希望任何人都可以幫助我..提前謝謝

Answer 1

你不必那樣送孩子。 React 有一種特定的方式來處理孩子，這更容易做和維護。 在您的情況下，您只需將 state 抬起並發送state和callback作為道具。

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

export default function App() {
 const [data, setData] = React.useState('')
  return (
    <div className="App">
      <Test data={data}>
         <> // shorthand for ReactFragment
            <label>Name: </label>
            <input type="text" onChange={(e) => setData(e.target.value)} value={data}/> 
         </>
      </Test>
    </div>
  );
}

export function Test({ data, children }) {
  return (
    <>
      <div>{children && children}</div>
      <div>{data}</div>
    </>
  );
}

Answer 2

您可以為此使用render props技術，如果您不喜歡主要的重構，您可以保持您的模式完整。

工作演示 - https://codesandbox.io/s/flamboyant-monad-hw2lu?file=/src/App.js

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

export function Child(props) {
  const { setData } = props;
  return (
    <React.Fragment>
      <label>Name: </label>
      <input type="text" onChange={(e) => setData(e.target.value)} />
    </React.Fragment>
  );
}

export default function App() {
  return (
    <div className="App">
      <Test
        render={(props) => {
          const { setData } = props;
          return <Child setData={setData} />;
        }}
      ></Test>
    </div>
  );
}

export function Test(props) {
  const [data, setData] = useState("");
  const { render } = props;
  return (
    <>
      <div>{render({ setData })}</div>
      <div>{data}</div>
    </>
  );
}