代码之家 › 专栏 › 技术社区 › OmniOwl

从父级调用子级中的函数表示“不是函数”?

material-ui reactjs javascript

OmniOwl · 技术社区 · 7 年前

我有一个父母叫 <Home/> 在里面,我有一个孩子叫 <ProjectDialog> 这是一个GoogleMaterial对话框,我将在它运行后自定义它。

在child中,我有以下代码:

handleOpen = () => {
    this.setState({ open: true });
};

老实说,这很正常。但我希望能够从父级更改打开状态,我在这里尝试:

let dialog = <ProjectDialog/>;

class Home extends Component {

    handleCardClick = id => {
        dialog.handleOpen();
    };

但是当我点击任何应该触发这个对话的元素时,我得到一个错误,handleOpen()不是一个函数。

我还有别的办法吗?将打开状态存储在道具中并以这种方式触发是否有意义?

1 回复 | 直到 7 年前

0xc14m1z 7 年前

事情本来就不是这样的。

您必须以声明的方式这样做,这意味着打开/关闭信息应该保存在父级中,并通过道具传递给子级。

class Home extends Component {
  state = {
    isDialogOpen: false
  }

  handleOpen = () => this.setState({ isDialogOpen: true })

  render() {
    return (
      ...
      <ProjectDialog isOpen={ this.state.isDialogOpen } />
      ...
      <button onClick={ this.handleDialogOpen }>
        Open project dialog
      </button>
      ...
    )
  }
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前