Javascript 选中复选框时切换子节点

我正在制作这个递归列表视图，如果父复选框被切换，我将尝试显示/隐藏子组件。我在这里做错了什么，我不能再让它工作了。问题似乎出在输入标记中的

onClick（）

函数的参数上。我是React新手，不知道如何解决这个问题。我能得到一些关于如何做的帮助吗

export default class MyList extends Component {
      constructor(props) {
        super(props);
        this.state = {
          visible: true
        };
      }

      toggle = () => {
        this.setState(
          {visible: !this.state.visible}
        );
      };

      render() {
        var style;
        if (!this.state.visible) {
          style = {display: "none"};
        }

        var node = this.props.data;
        return(
          <div>
          <ul style={style}>
          {
            Object.keys(this.props.data).map(function(key){
            return (
                <li key={key}><input type="checkbox" onClick={MyList.toggle}/>
                  <label>{key}</label> :
                  {typeof node[key] === 'object' ? <MyList data = {node[key]} /> : node[key]}
                </li>
              );
            })
          }
          </ul>
          </div>
        );
      }
}

导出默认类MyList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
可见：正确
};
}
切换=（）=>{
这是我的国家(
{可见：！this.state.visible}
);
};
render（）{
var风格；
如果（！this.state.visible）{
样式={显示：“无”}；
}
var节点=this.props.data；
返回(

{
Object.keys（this.props.data）.map（function（key）{
返回(

{key}：
{typeof node[key]=='object'？：node[key]}

);
})
}

);
}
}

我不确定您到底想做什么。
正如你在评论中看到的那样，我试图理解，但我还是不明白 无论如何，只要回答您的问题并为您指出正确的方向，您的问题就在于这一行：

onClick={MyList.toggle}

toggle

是属于类的实例的方法，它不是静态成员，因此必须在实例的上下文中调用它。
一种方法是使用

this

作为当前实例的引用。问题是您在

对象的
.map
中使用匿名函数。键

和

此

不再引用实例。
要确保

this

是类实例的引用，可以使用一个arrow函数，该函数使用

this

的词法上下文

{Object.keys(this.props.data).map(key => {
            return (
              <li key={key}>
                <input type="checkbox" onClick={this.toggle} />
                ...

为什么要

我的列表

呈现自己？我不确定。我不知道任何其他方法。具体怎么办？我正在制作一个递归列表视图，并打算在单击“父”复选框时隐藏子节点。我正在检查子节点是否是一个对象，组件调用它自己，并且您只想隐藏已单击的复选框？您是对的，我不知道如何使用此方法调用toggle（）方法。我对所有的困惑感到抱歉。我正试图做一些类似的事情，但我不能折叠列表，而是使用复选框。不知道把样式属性放在哪里。谢谢，伙计。我已经制作了您在上一篇评论中提到的可折叠列表，但我正在尝试将其制作成一个通用的树视图，它接受所有属性模式并打印节点值。这就是为什么我修改了代码，并且从那以后遇到了麻烦。例如：var myNode={“pager”：{“page”：1，“nextPage”：“some_page”}，“groups”：[{“id”：“3”，“name”：“One”}，{“number”：“2”，“name”：“Two”}，]}有没有可能有一个使用钩子的版本？