从反应功能组件中的道具更改设置状态？

Question

我有一个简单的 React 功能组件，如下代码所示

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 事件触发时更新 data 组件内部的 Test 状态？这是 sandbox

希望有人能帮助我.. 提前致谢

Answer 1

您不必以这种方式发送 children。 React 有一种处理 children 的特定方法，这种方法更容易执行和维护。在你的情况下，你只需要提升你的状态并发送 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>
    </>
  );
}

从反应功能组件中的道具更改设置状态？

Set state from props change in react functional component?

reactjs

react-props

react-hooks

react-state

react-functional-component