Question

我有父组件TodoItem和两个子组件：EditTodoItem和ShowTodoItem。我用状态版切换这个子组件。如果为true，则显示EditTodoItem。当版本为false时，ShowTodoItem正在渲染。当我们点击ShowTodoItem时，版本应该成立。但是这段代码不起作用：

＆＃13;

import React from 'react'
import PropTypes from 'prop-types'
import ShowTodoItem from './TodoItem/ShowTodoItem'
import EditTodoItem from './TodoItem/EditTodoItem'

export default class TodoItem extends React.Component {
    constructor(props) {
        super(props);
        this.handleOnTodoClick = this.handleOnTodoClick.bind(this);
        this.handleOnEnterPress = this.handleOnEnterPress.bind(this);
        this.state = { edition: false };
    }

    handleOnTodoClick() {
        console.log('edit');
        this.setState({ edition: true });
    }

    handleOnEnterPress() {
        this.setState({ edition: false });
    }

    render() {
        if (this.state.edition) {
            return (
                <EditTodoItem item={this.props.item} onTodoChange={this.props.onTodoChange} onEnterPress={this.handleOnEnterPress} />
            );
        }
        return (
            <ShowTodoItem onClick={this.handleOnTodoClick} item={this.props.item} onRemoveTodoClick={this.props.onRemoveTodoClick}  />
        );
    }
}

＆＃13;

我在浏览器控制台中没有错误，但我也没有得到console.log的结果（＆＃39;编辑＆＃39;）;

Answer 1

onClick不会触发自定义组件，它只会在从jsx创建的dom节点上触发。当您将onClick传递给自定义组件时，它将作为prop传递。确保ShowItemTodo中的代码有一行如下所示：

return (
  <button onClick={this.props.onClick}>click me</button>
)

反应onClick不起作用

1 个答案: