时间戳

首页 > 解决方案 > 从反应功能组件中的道具更改设置状态？

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

问题描述

我有简单的反应功能组件看起来像下面的代码

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这里是沙盒

希望任何人都可以帮助我..提前谢谢

标签： reactjsreact-hooksreact-propsreact-functional-componentreact-state

解决方案

你不必那样送孩子。React 有一种特定的方式来处理孩子，这更容易做和维护。在你的情况下，你只需要提升你的状态并将stateandcallback作为道具发送。

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>
    </>
  );
}

推荐阅读