import React, { Component } from 'react';
import propTypes from "prop-types"

class Record extends Component {
    constructor(props) {
        super(props);
        this.state = {
            edit: false
        }

        this.handleEdit = this.handleEdit.bind(this);
        this.handleUpdate = this.handleUpdate.bind(this);
    }
    render() {
        return this.state.edit
            ?
            <tr>
                <td><input type="text" defaultValue={this.props.record.date} className="form-control" /></td>
                <td><input type="text" defaultValue={this.props.record.title} className="form-control" /></td>
                <td><input type="text" defaultValue={this.props.record.amount} className="form-control" /></td>
                <td>
                    <button className="btn btn-primary mr-1" onClick={this.handleUpdate(this.props.record.id)}>update</button>
                    <button className="btn btn-outline-secondary" onClick={this.handleEdit}>cancel</button>
                </td>
            </tr>
            :
            <tr>
                <td>{this.props.record.date}</td>
                <td>{this.props.record.title}</td>
                <td>￥ {this.props.record.amount}</td>
                <td>
                    <button className="btn btn-primary mr-1" onClick={this.handleEdit}>edit</button>
                    <button className="btn btn-danger">delete</button>
                </td>
            </tr>
    }
    // method
    handleEdit() {
        console.log(22222)
        this.setState({
            edit: !this.state.edit
        })
    }
    handleUpdate(id) {
        console.log(id, 'handleUpdate');
    }
}

export default Record;

Record.propTypes = {
    id: propTypes.number,
    date: propTypes.string,
    title: propTypes.string,
    amount: propTypes.number
}

為什么在我點擊 handleEdit 方法的時候，會觸發(fā) handleUpdate 方法呢？
而且之后再點擊 handleUpdate方法會沒有反應