更新反应变量值onClick,但不会更新react组件 我不明白为什么它不起作用以及到底是什么问题。
代码
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state.pageEditInitialValue = false;
}
handleSubmit = id => {
alert(id);
this.state.pageEditInitialValue = true;
};
render() {
const pageEdit = this.state.pageEditInitialValue;
return (
<div>
{pageEdit ? (
<Page title="Configuration">
<Row>
<Col>
<Card className="mb-3">
<CardHeader>Hotel Edit</CardHeader>
<CardBody>
<Table responsive>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Rating</th>
<th>Location</th>
<th />
</tr>
</thead>
<tbody>
{this.state.persons.map((person, index) => (
<tr key={person.hotelId}>
<td> {person.hotelId}</td>
<td> {person.hotelName}</td>
<td> {person.hotelRating}</td>
<td> {person.hotelLocation}</td>
<td>
<Button
color="primary"
onClick={() => this.handleSubmit(person._id)}
>
Edit
</Button>
</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</Page>
) : (
<Page title="Configuration">
<Row>
<Col>
<Card className="mb-3">
<CardHeader>Hotel Data</CardHeader>
<CardBody>
<Table responsive>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Rating</th>
<th>Location</th>
<th />
</tr>
</thead>
<tbody>
{this.state.persons.map((person, index) => (
<tr key={person.hotelId}>
<td> {person.hotelId}</td>
<td> {person.hotelName}</td>
<td> {person.hotelRating}</td>
<td> {person.hotelLocation}</td>
<td>
<Button
color="primary"
onClick={() => this.handleSubmit(person._id)}
>
Edit
</Button>
</td>
</tr>
))}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</Page>
)}
</div>
);
}
答案 0 :(得分:3)
您不应直接更改组件状态,而应调用setState
method。
handleSubmit = (id) => {
alert(id)
this.setState({ pageEditInitialValue: true })
}