Javascript 未捕获错误：预期'onClick'侦听器是一个函数，但得到的是'object'类型的值

我有一个我不知道如何解决的问题

我试图调用

组件

内部的

onClick

。但我犯了这个错误：

未捕获错误：预期

onClick

侦听器是一个函数，但得到的值为

object

类型

调用

组件的我的代码

：

从“React”导入React；
导入“./Square.css”；
从“/Controller.js”导入控制器；
类Square扩展了React.Component{
render（）{
返回(
{this.props.children（）}
)
}
}
导出默认方块

您可以通过将一个道具传递给孩子来实现这一点，该道具由

onMouseDown

打开，由

onmousedup

关闭：

Square.jsx

import React, { Component } from 'react';
import './square.css';
import Controller from './Controller';


class Square extends Component {
  state = { clicked: false };

  toggleClicked = (clicked = false) => {
    this.setState({ clicked });
  }

  render() {
    return (
      <div className="square" onMouseDown={this.toggleClicked.bind(this, true)} onMouseUp={this.toggleClicked}>
        <Controller clicked={this.state.clicked} />
      </div>
    )
  }
}

export default Square;

import React, { Component } from 'react';
import './controller.css';

class Controller extends Component {
  changePlayer = () => {
    alert('oi')
  }

  componentDidUpdate(prevProps) {
    if (this.props.clicked && !prevProps.clicked) {
      this.changePlayer();
    }
  }

  render() {
    return (
      <div className='controller'>
        {this.props.position}
      </div>
    )
  }
}

export default Controller

import React，{Component}来自'React'；
导入“./square.css”；
从“./Controller”导入控制器；
类Square扩展组件{
状态={单击：false}；
toggleClicked=（clicked=false）=>{
this.setState（{clicked}）；
}
render（）{
返回(
)
}
}
导出默认方块；

Controller.jsx

import React, { Component } from 'react';
import './square.css';
import Controller from './Controller';


class Square extends Component {
  state = { clicked: false };

  toggleClicked = (clicked = false) => {
    this.setState({ clicked });
  }

  render() {
    return (
      <div className="square" onMouseDown={this.toggleClicked.bind(this, true)} onMouseUp={this.toggleClicked}>
        <Controller clicked={this.state.clicked} />
      </div>
    )
  }
}

export default Square;

import React, { Component } from 'react';
import './controller.css';

class Controller extends Component {
  changePlayer = () => {
    alert('oi')
  }

  componentDidUpdate(prevProps) {
    if (this.props.clicked && !prevProps.clicked) {
      this.changePlayer();
    }
  }

  render() {
    return (
      <div className='controller'>
        {this.props.position}
      </div>
    )
  }
}

export default Controller

import React，{Component}来自'React'；
导入“/controller.css”；
类控制器扩展组件{
changePlayer=（）=>{
警报（'oi'）
}
componentDidUpdate（prevProps）{
如果（this.props.clicked&！prevProps.clicked）{
这个.changePlayer（）；
}
}
render（）{
返回(
{this.props.position}
)
}
}
导出默认控制器

---

如果您想从父组件调用子组件的函数，您需要使用React中的ref，以下是您的操作方法：

import React from 'react';
import './Square.css';
import Controller from './controller.js';

class Square extends React.Component {
 render() {
    return (
    <div className="square" onClick={this.child.changePlayer();}>
        {this.props.children(<Controller  ref={instance => { this.child = instance; }}/>)}
      </div>
    )
  }
}

export default Square;

从“React”导入React；
导入“./Square.css”；
从“/Controller.js”导入控制器；
类Square扩展了React.Component{
render（）{
返回(
{this.props.children（{this.child=instance；}}}/>）}
)
}
}
导出默认方块；

很明显，这是一个错误，

{}

不是一个函数你知道我如何使用控制器内部的函数吗？家长不应该调用他们孩子的函数。这表明您需要重新考虑组件层次结构。使

@Jota中的

onClick

功能得到解决。如果是，请接受解决问题的答案。