Я использую ReactJS. Я использую реактивную таблицу. Я использую выпадающее меню в строке таблицы. Но когда я щелкаю раскрывающееся меню в таблице, все меню открываются. Я хочу, чтобы раскрывающийся список, который я выбрал с раскрывающимся списком, был открыт в таблице.
Как это исправить?
Так что, если я нажму на таблицу, откроется это меню.
import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import withAuth from "../../components/helpers/withAuth";
import {
Button,
Card,
CardBody,
CardHeader,
Col,
Pagination,
PaginationItem,
PaginationLink,
Row,
Table,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Alert
} from "reactstrap";
import { connect } from "react-redux";
import Input from "reactstrap/es/Input";
import ButtonDropdown from "reactstrap/es/ButtonDropdown";
class CustomerDebt extends Component {
constructor(props) {
super(props);
this.domain = `http://127.0.0.1:8000`;
this.state = {
dropdownOpen: false,
modal: false,
isLoaded: true,
items: [],
selectedItem:{ }
};
this.dropdownToggle = this.dropdownToggle.bind(this);
this.debtModalForm = this.debtModalForm.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmitUpdate = this.handleSubmitUpdate.bind(this);
this.handleSubmitCreate = this.handleSubmitCreate.bind(this);
}
//Customer debts unmounts - refresh problem
abortController = new AbortController();
componentWillUnmount = () => {
this.abortController.abort();
};
//Get customer debts
async componentDidMount() {
//Müşteriye ait tüm borçları listele
await fetch(
`${this.domain}/api/debt/list?customer=` +
this.props.customerInfo.customer.id,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
}
}
)
.then(res => {
if (res.ok) {
return res.json();
} else {
return res.json().then(err => Promise.reject(err));
}
})
.then(json => {
this.setState({
items: json
});
this.abortController.abort();
// console.log(json)
})
.catch(error => {
//console.log('request failed:', error);
return error;
});
}
//Customer debt update
async handleSubmitUpdate (value) {
await fetch(`${this.domain}/api/debt/update/`+ value.id, {
method: "PUT",
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
user: this.props.account_profile.profile.profile.id, //this.props.user.user_id,
customer: this.props.customerInfo.customer.id,
debtKey: this.props.customerInfo.customer.customerKey,
createduserKey: this.props.account_profile.profile.profile.userKey,
totalDebt: this.state.totalDebt,
receivedAmount: this.state.receivedAmount,
description: this.state.description,
paymentDate: this.state.paymentDate
})
})
.then(response => {
return response.json();
})
.then(json => {
this.componentDidMount();
//console.log(json)
})
.catch(err => console.log(err));
};
//Customer debt insert
async handleSubmitCreate (value) {
console.log("burası insert alanı");
console.log(value);
await fetch(`${this.domain}/api/debt/create`, {
method: "POST",
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
user: this.props.account_profile.profile.profile.id, //this.props.user.user_id,
customer: this.props.customerInfo.customer.id,
debtKey: this.props.customerInfo.customer.customerKey,
createduserKey: this.props.account_profile.profile.profile.userKey,
totalDebt: this.state.totalDebt,
receivedAmount: this.state.receivedAmount,
description: this.state.description,
paymentDate: this.state.paymentDate
})
})
.then(response => {
// console.log(response );
return response.json();
})
.then(json => {
this.componentDidMount();
//console.log(json)
})
.catch(err => console.log(err));
};
debtModalForm (value) {
console.log( value);
if (value === "newRecord") {
this.setState( prevState =>({
modal: !prevState.modal, // modal durumunu ayarla
}))
} else {
console.log(value);
this.setState(prevState => ({
modal: !prevState.modal,
selectedItem: value,
//Hata oluşmaması için state aktarıyorum
user: value.user,
customer: value.customer,
debtKey: value.debtKey,
createduserKey: value.createduserKey,
totalDebt: value.totalDebt,
receivedAmount: value.receivedAmount,
description: value.description,
paymentDate: value.paymentDate
}));
}
}
//text handleChange
handleChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
//dropdown toggle menu
dropdownToggle = () => {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen,
}));
};
render() {
const { isLoaded, items } = this.state;
//console.log(this.props.customerInfo.customer);
//console.log(this.props.account_profile.profile.profile.userKey);
//console.log(this.props.customerInfo.customer.customerKey );
//If customerID -1 return
if (this.props.customerInfo.customer.id === "-1") {
return <Redirect to={"/customerlist"} />;
}
if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div className={"animated fadeIn container-fluid"}>
<Row>
<Col>
<Card>
<CardHeader>
<Dropdown
isOpen={this.state.dropdownOpen}
toggle={this.dropdownToggle }
onClick={ ()=> console.log("üst menü tıklandı")}
>
<DropdownToggle caret className={"float-right"}>
İşlemler
</DropdownToggle>
<DropdownMenu>
<DropdownItem
color="info"
onClick={ this.debtModalForm.bind(this,"newRecord") }> newRecord
{
<Modal
isOpen={this.state.modal}
toggle={this.debtModalForm}
backdrop={"static"}
>
<ModalHeader toggle={this.debtModalForm}>
{ this.props.customerInfo.customer.id } customer number -new
</ModalHeader>
<ModalBody>
<Row>
<Col xs="2">Borç</Col>
<Col xs="6">
<Input
type={"text"}
placeholder={"Borç"}
name={"totalDebt"}
defaultValue={this.state.totalDebt}
onChange={this.handleChange}
/>
</Col>
</Row>
</ModalBody>
<ModalFooter>
<Button
color="primary"
onClick={ this.handleSubmitCreate.bind(this)}
> Yeni Kayıt
</Button>{" "}
<Button
color="secondary"
onClick={this.debtModalForm}
> Kapat
</Button>
</ModalFooter>
</Modal>
}
</DropdownItem>
</DropdownMenu>
</Dropdown>
<i className="fa fa-align-justify" /> Müşteri Borcu
</CardHeader>
<CardBody>
<Table hover bordered striped responsive size="sm">
<thead>
<tr>
<th width={"10"} />
<th width={"15"}>No</th>
<th style={{ display: "none" }}>User</th>
<th style={{ display: "none" }}>Key</th>
<th style={{ display: "none" }}>CreatedUserKey</th>
<th width={"40"}>Borç Miktarı</th>
<th width={"40"}>Alınan miktar</th>
<th scope={"row"}>Açıklama</th>
<th width={"20"}>Ödeme tarihi</th>
</tr>
</thead>
<tbody>
{items.map(item => (
<tr key={item.id}>
<td>
<ButtonDropdown
isOpen={this.state.dropdownOpen}
toggle={this.dropdownToggle}
onClick={() => console.log(item.id)}>
<DropdownToggle caret>
Process
</DropdownToggle>
<DropdownMenu>
<DropdownItem >Header</DropdownItem>
<DropdownItem >Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</td>
<td>{item.id}</td>
<td style={{ display: "none" }}>{item.user}</td>
<td style={{ display: "none" }}>{item.debtKey}</td>
<td style={{ display: "none" }}> {item.createduserKey} </td>
<td>{item.totalDebt}</td>
<td>{item.receivedAmount}</td>
<td>{item.description}</td>
<td>{new Date(item.paymentDate).toLocaleString()}</td>
</tr>
))}
</tbody>
</Table>
<nav>
<Pagination>
<PaginationItem>
<PaginationLink previous tag="button">
Önceki
</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink tag="button">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink tag="button">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next tag="button">
Sonraki
</PaginationLink>
</PaginationItem>
<PaginationItem>
<Button
color="info"
onClick={ this.debtModalForm.bind(this, "newRecord") }> Yeni Kayıt
{
<Modal
isOpen={this.state.modal}
toggle={this.debtModalForm}
backdrop={"static"}
>
<ModalHeader toggle={this.debtModalForm}>
{ this.props.customerInfo.customer.id } numaralı müşteri - Yeni Kayıt
</ModalHeader>
<ModalBody>
<Row>
<Col xs="2">Borç</Col>
<Col xs="6">
<Input
type={"text"}
placeholder={"Borç"}
name={"totalDebt"}
defaultValue={this.state.totalDebt}
onChange={this.handleChange}
/>
</Col>
</Row>
<Row>
<Col xs="2">Alınan</Col>
<Col xs="6">
<Input
type={"text"}
placeholder={"Alınan"}
name={"receivedAmount"}
defaultValue={this.state.receivedAmount}
onChange={this.handleChange}
/>
</Col>
</Row>
<Row>
<Col xs="2">Açıklama</Col>
<Col xs="6">
<Input
type={"textarea"}
placeholder={"Açıklama"}
name={"description"}
defaultValue={this.state.description}
onChange={this.handleChange}
rows={"2"}
/>
</Col>
</Row>
<Row>
<Col xs="2">Ödeme tarihi</Col>
<Col xs="6">
<Input
type={"date"}
placeholder={"Ödeme tarihi"}
name={"paymentDate"}
defaultValue={this.state.selectedItem.paymentDate}
onChange={this.handleChange}
/>
</Col>
</Row>
</ModalBody>
<ModalFooter>
<Button
color="primary"
onClick={ this.handleSubmitCreate.bind(this)}
> Yeni Kayıt
</Button>{" "}
<Button
color="secondary"
onClick={this.debtModalForm}
> Kapat
</Button>
</ModalFooter>
</Modal>
}
</Button>
</PaginationItem>
</Pagination>
</nav>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
}
}
const mapStateToProps = state => {
return state;
};
export default connect(mapStateToProps)(withAuth(CustomerDebt));