我正在尝试使用onClick在组件内部创建一个“编辑”按钮,该按钮呈现一个单独的组件,即“客户端编辑模式”。我在弄清楚如何做到这一点时遇到了麻烦。
带有“编辑”按钮的组件
import React, { Component } from "react";
import { Table, Container, Button } from "reactstrap";
import {
Modal,
ModalHeader,
ModalBody,
Form,
FormGroup,
Label,
Input,
} from "reactstrap";
import { connect } from "react-redux";
import {
getClients,
addClient,
editClient,
deleteClient,
} from "../actions/clientActions";
import PropTypes from "prop-types";
class ClientTable extends Component {
componentDidMount() {
this.props.getClients();
}
renderClient = (clients, _id) => {
return (
<tr key={_id} timeout={500} classNames="fade">
<td>
<Button
className="remove-btn"
color="danger"
size="sm"
onClick={() => this.onDeleteClick(clients._id)}
>
×
</Button>
<Button
style={{ marginLeft: ".3rem" }}
className="add-btn"
outline
color="warning"
size="sm"
>
Edit
</Button>
<Button
style={{ marginLeft: ".3rem" }}
className="detail-btn"
outline
color="info"
size="sm"
>
Details
</Button>
</td>
<td>{clients.name}</td>
<td>{clients.email}</td>
<td>{clients.number}</td>
</tr>
);
};
onDeleteClick = (id) => {
this.props.deleteClient(id);
};
render() {
const { clients } = this.props.client;
return (
<Container id="listContainer">
<Table
id="listTable"
className="table-striped table-bordered table-hover"
dark
>
<tr class="listRow">
<thead id="tableHeader">
<tr>
<th id="listActions">Actions</th>
<th id="listName">Name</th>
<th id="listEmail">Email</th>
<th id="listNumber">Number</th>
</tr>
</thead>
<tbody class="listRow">{clients.map(this.renderClient)}</tbody>
</tr>
</Table>
</Container>
);
}
}
ClientTable.propTypes = {
getClients: PropTypes.func.isRequired,
client: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
client: state.client,
});
export default connect(mapStateToProps, {
getClients,
deleteClient,
addClient,
})(ClientTable);
该按钮将呈现的组件
import React, { Component } from "react";
import {
Button,
Modal,
ModalHeader,
ModalBody,
Form,
FormGroup,
Label,
Input,
} from "reactstrap";
import { connect } from "react-redux";
import { editClient } from "../actions/clientActions";
import { CLIENTS_LOADING } from "../actions/types";
class ClientEditModal extends Component {
state = {
modal: false,
name: "",
email: "",
number: "",
};
toggle = () => {
this.setState({
modal: !this.state.modal,
});
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
onSubmit = (e) => {
e.preventDefault();
const editClient = {
name: this.state.name,
email: this.state.email,
number: this.state.number,
};
this.props.editClient(editClient);
this.toggle();
};
render() {
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}> Edit Client</ModalHeader>
<ModalBody>
<Form onSubmit={this.onSubmit}>
<FormGroup>
<Label for="name"> Name </Label>
<Input
type="text"
name="name"
id="client"
placeholder="Add name"
onChange={this.onChange}
></Input>
<Label for="email"> Email </Label>
<Input
type="text"
name="email"
id="client"
placeholder="Add email"
onChange={this.onChange}
></Input>
<Label for="number"> Number </Label>
<Input
type="text"
name="number"
id="client"
placeholder="Add number"
onChange={this.onChange}
></Input>
<Button color="dark" style={{ marginTop: "2rem" }} block>
Submit Changes
</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
</div>
);
}
}
const mapStateToProps = (state) => ({
client: state.client,
});
export default connect(mapStateToProps, { editClient })(ClientEditModal);
我也想对'details'按钮执行相同的操作,但是我认为一旦弄清楚如何进行操作,这将非常简单。如果有人有任何想法,我将不胜感激!谢谢
您可以执行以下操作:
class ClientEditModal extends Component {
//...
componentDidMount() {
if (this.props.isOpen) {
this.toggle(true);
}
}
toggle = (isOpen) => {
this.setState({
modal: isOpen,
});
}
// ...
}
并且在ClientTable
中,创建一个新状态isOpen
,当您按下编辑按钮时,该状态会翻转。
showModal = () => {
this.setState({ isOpen: true; });
}
//...
<Button onClick={this.showModal}>Edit</Button>
然后将isOpen
状态传递给ClientEditModal
<ClientEditModal isOpen={this.state.isOpen} {...otherProps} />