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
} Why does the handleUpdate method trigger when I click on the handleEdit method?
and then click handleUpdate method will not respond
