Javascript 如何通过 React 组件传递函数以在父子之间共享数据

发布于06月07日

我已经尽我所能地学习了本教程(https://www.freecodecamp.org/news/pass-data-between-components-in-react/)，但仍然有困难

我收到以下错误:

Uncaught TypeError: childToParent is not a function"

以下是父函数:

function App() {
const childToParent =(value) => {console.log(value)}
...
return (
...
  <SelectHours value={state.selectedHour} childToParent={childToParent}></SelectHours>
...
)

和子函数:

export default function SelectHours(selectedHours, childToParent) {
....
return (
<Select
  labelId="select-demo"
  id='select-demo'
  defaultValue=""
  //onChange={event => handleChange(event.target.value, true)}
  value={workHours[0] ? workHours[0] : ""}
>
  {
    workHours.map((value, index) => {
      return (
        <MenuItem
          value={value ? value : ""}
          key={index}
          onClick={() => childToParent(value)}
        >
          {value}
        </MenuItem>
      )
    })
  }
</Select>
)
....
}

推荐答案

你需要加上你的花括号，这样react可以告诉你这是props .

export default function SelectHours({selectedHours, childToParent}) {
....
return (
<Select
  labelId="select-demo"
  id='select-demo'
  defaultValue=""
  //onChange={event => handleChange(event.target.value, true)}
  value={workHours[0] ? workHours[0] : ""}
>
  {
    workHours.map((value, index) => {
      return (
        <MenuItem
          value={value ? value : ""}
          key={index}
          onClick={() => childToParent(value)}
        >
          {value}
        </MenuItem>
      )
    })
  }
</Select>
)
....
}