Question

我有一个带有TAB的屏幕，该TAB是一个组件，并且在TAB中还有另一个名为FORM的组件。

层次结构：

屏幕
- 标签
  - 表格

在此层次结构中，我想将NAME值从FORM组件传递到TAB组件，然后从TAB组件传递到SCREEN组件。

代码屏幕：

List<Integer> List1 = new ArrayList<>();

代码标签：

export default function Screen() {
  return (
    <>
      <TabProfile me={me} />
    </>
  );
}

代码格式：

export default function TabProfile({ me }) {
  return (
    <div className={classes.root}>
      <div className={classes.demo1}>
        <AntTabs value={value} onChange={handleChange} aria-label="ant example">
          <AntTab label="Config" />
        </AntTabs>
      </div>
      <div>
        <TabPanel value={value} index={0}>
          <Config me={!me ? [] : me} />
        </TabPanel>
      </div>
    </div>
  );
}

Answer 1

您可以通过在顶部组件中添加状态来实现。然后您将状态更新功能向下传递两次：

import { useState } from 'react'

export default function Screen() {
  const [ name, setName ] = useState('me') // 'me' is the start value

  return (
    <>
      <TabProfile me={name} setName={setName} />
    </>
  );
}

export default function TabProfile({ me, setName }) {
  return (...
          <Config me={!me ? [] : me} setName={setName} />
  ...
  );
}

export default function Config({ me, setName }) {
  return (
    <>
      <BoxFormGrid>
        <Label>Name</Label>
        <Input type="text" value={me} onChange={event => setName(event.target.value)} />
      </BoxFormGrid>
    </>
  );
}

从子组件发送一个值到父组件reactjs

1 个答案: