ReactJS onClick in函数返回JSX未检测到

Question

在我的渲染中，我有一个返回JSX块的函数：

function userBlock(category) {
    return (
        <div className="row">
            <div className="col-md-12 pb15">
                <Chip icon={ category } name={ category }/>
            </div>
            <div className="col-md-12 pb15">
                <div className="well">
                    <p className="lead text-center">You have not yet created any lists.</p>
                    <p className="text-center">
                        <a onClick={ createNewList }><i className="fa fa-plus-circle"></i> New List</a>
                    </p>
                </div>
            </div>
        </div>
    )
}

目前createNewList函数没有触发，起初我尝试使用this.createNewList，我还将其绑定到构造函数。然而，这引起了错误......

  

TypeError：无法读取属性＆＃39; createNewList＆＃39;未定义的

constructor(props) {
    super(props);
    this.state = {
        category: props.category,
        category_cards: []
    };
    this.createNewList = this.createNewList.bind(this);
}

createNewList() {
    console.log('1 createNewList');
}

render() {

    function createNewList() {
        console.log('2 createNewList');
    }

完整代码

import React from 'react';
import Chip from '../Chip';

export class List extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            category: props.category,
            category_cards: []
        };
        this.createNewList = this.createNewList.bind(this);
    }

    createNewList() {
        console.log('1 createNewList');
    }

    render() {

        function createNewList() {
            console.log('2 createNewList');
        }

        function defaultBlock(category) {
            // return <Categories category={ category }/>
            return <h1>Categories component goes here</h1>
        }

        function userBlock(category) {
            return (
                <div className="row">
                    <div className="col-md-12 pb15">
                        <Chip icon={ category } name={ category }/>
                    </div>
                    <div className="col-md-12 pb15">
                        <div className="well">
                            <p className="lead text-center">You have not yet created any lists.</p>
                            <p className="text-center">
                                <a onClick={ createNewList }><i className="fa fa-plus-circle"></i> New List</a>
                            </p>
                        </div>
                    </div>
                </div>
            )
        }

        function toggler(category) {
            return category === 'user' ? userBlock(category) : defaultBlock(category);
        }

        return (
            <div className="container">
                { toggler(this.state.category) }
            </div>
        );
    }
}

export default List;

Answer 1

这是一个范围问题，定义类中的所有function（在render方法之外）并通过this.functionName()调用它们。

使用它，检查工作代码：

class List extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                category: props.category,
                category_cards: []
            };
            this.createNewList = this.createNewList.bind(this);
        }
    
        createNewList() {
            console.log('2 createNewList');
        }
    
        defaultBlock(category) {
            return <h1>Categories component goes here</h1>
        }
    
        userBlock(category) {
            return (
                <div className="row">
                    <div className="col-md-12 pb15">
                        <Chip icon={ category } name={ category }/>
                    </div>
                    <div className="col-md-12 pb15">
                        <div className="well">
                            <p className="lead text-center">You have not yet created any lists.</p>
                            <p className="text-center">
                                <a onClick={ this.createNewList }><i className="fa fa-plus-circle"></i> New List</a>
                            </p>
                        </div>
                    </div>
                </div>
            )
        }
    
         toggler(category) {
            return category === 'user' ? this.userBlock(category) : this.defaultBlock(category);
        }
    
        render() {        
    
            return (
                <div className="container">
                    { this.toggler(this.state.category) }
                </div>
            );
        }
    }

ReactDOM.render(<List/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>