Question

onClick={this.onToggleMenuModal}为什么div id="freezer"没有在onToggleMenuModal={this.handleToggleMenuModal}上触发，而在我的组件中传递onToggleMenuModal={this.handleToggleMenuModal}？

添加Unknown Prop Warning以返回错误import React from 'react'; import PropTypes from 'prop-types'; ... class Template extends React.Component { constructor(props) { super(props) this.state = { menuModal: false, loading: 'is-loading' } this.handleToggleMenuModal = this.handleToggleMenuModal.bind(this) } componentDidMount () { this.timeoutId = setTimeout(() => { this.setState({loading: ''}); }, 100); } componentWillUnmount () { if (this.timeoutId) { clearTimeout(this.timeoutId); } } handleToggleMenuModal() { this.setState({ menuModal: !this.state.menuModal }) } render() { const { children } = this.props return ( <div id="perspective" className={`showMenu ${this.state.loading} ${this.state.menuModal ? 'animate modalview' : ''}`}> <Helmet> ... </Helmet> <div id="container"> <Header onToggleMenuModal={this.handleToggleMenuModal} /> <div id="wrapper"> {children()} <Footer /> </div> <div id="freezer" onClick={this.onToggleMenuModal}></div> </div> </div> ) } } Template.propTypes = { children: PropTypes.func, } export default Template

这是代码......

{
  "id": 1,
  "name": "user1",
  "hasChildren": true,
  "parentID": 0,
  "children": [
    {
      "id": 2,
      "name": "user2",
      "paretnID": 1,
      "hasChildren": true,
      "children": [
    {
      "id": 3,
      "name": "user3",
      "parentID": 2,
      "hasChildren": false,
      "children": [

      ]
    },
    {
      "id": 4,
      "name": "user4",
      "parentID": 2,
      "hasChildren": false,
      "children": [

      ]
    }
      ]
    },
    {
      "id": 5,
      "name": "user5",
      "paretnID": 1,
      "hasChildren": true,
      "children": [
    {
      "id": 6,
      "name": "user6",
      "parentID": 5,
      "hasChildren": false,
      "children": [

      ]
    },
    {
      "id": 7,
      "name": "user7",
      "parentID": 5,
      "hasChildren": false,
      "children": [

      ]
    }
      ]
    },
    {
      "id": 8,
      "name": "user8",
      "paretnID": 1,
      "hasChildren": true,
      "children": [
    {
      "id": 9,
      "name": "user9",
      "parentID": 8,
      "hasChildren": false,
      "children": [

      ]
    },
    {
      "id": 10,
      "name": "user10",
      "parentID": 8,
      "hasChildren": true,
      "children": [
        {
          "id": 11,
          "name": "user11",
          "parentID": 10,
          "hasChildren": false,
          "children": [

          ]
        },
        {
          "id": 12,
          "name": "user12",
          "parentID": 10,
          "hasChildren": false,
          "children": [

          ]
        }
      ]
    }
      ]
    }
  ]
}

Answer 1

你必须点击内部箭头功能，如：

 onClick={() => {this.onToggleMenuModal}}

Answer 2

检查此解决方案并告诉我它是否适合您。

import React from 'react';
import PropTypes from 'prop-types';
...

class Template extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
          menuModal: false,
          loading: 'is-loading'
      }
      this.handleToggleMenuModal = this.handleToggleMenuModal.bind(this)
    }

    componentDidMount () {
      this.timeoutId = setTimeout(() => {
          this.setState({loading: ''});
      }, 100);
    }

    componentWillUnmount () {
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }
    }

    handleToggleMenuModal() {
      this.setState({
        menuModal: !this.state.menuModal
      })
  }


    render() {
        const { children } = this.props

      return (
        <div id="perspective" className={`showMenu ${this.state.loading} ${this.state.menuModal ? 'animate modalview' : ''}`}>
          <Helmet>
            ...
          </Helmet>
            <div id="container">
              <Header onToggleMenuModal={this.handleToggleMenuModal} />
              <div id="wrapper">
              {children()} 
              <Footer />
              </div>
              <div id="freezer" onClick={this.onToggleMenuModal}></div>
            </div>
        </div>
      )
    }
  }

  Template.propTypes = {
      children: PropTypes.func,
  }

export default Template

template.js中的onClick道具无法触发

2 个答案: