С трудом выбирает данные из выбранной строки в компоненте таблицы реакции наших приложений и отображает данные в модальном режиме. Я попытался извлечь данные с помощью this.state.data.Issue и предупредил об этом, но он возвращает неопределенное значение каждый раз, когда я нажимаю кнопку в определенной строке в нашей таблице. Есть ли способ решить мою проблему? Потому что этот мод будет служить в качестве формы, где администратор может увидеть детали проблемы и утвердить или остановить заявленную проблему.
вот мой код:
class Sumbong extends Component {
handleButtonClick = (e, row) => {
this.setState({ visible: true});
};
constructor(props) {
super(props);
this.state = {
name: [],
createAt: '',
data: []
};
}
componentDidMount(){
refs.on('value', snap => {
let requests = [];
snap.forEach(reqs => {
let ID = reqs.key
let reqObject = reqs.val();
const {name, Issue, createAt, LocStamp, Status} = reqs.val();
requests.push({ID, name, Issue, createAt, LocStamp, Status});
})
this.setState({data: requests})
console.log('requests: ', requests);
})
}
render() {
const columns = [
{
Header: "uid",
accessor: "ID",
show: false
},
{
Header: "Sender's Name",
accessor: "name",
style: {
fontSize: '13px'
},
},
{
Header: "Report Category",
accessor: "Issue",
style: {
fontSize: '13px'
},
},
{
Header: "Date Reported",
accessor: "createAt",
style: {
fontSize: '13px'
},
},
{
Header: "Location",
accessor: "LocStamp",
style: {
fontSize: '13px'
},
},
{
Header: "Status",
accessor: "Status",
style: {
fontSize: '13px'
},
},
{
Header: "Actions",
accessor: "ID",
filterable: false,
Cell: ({ row }) => (
<div style={buttonTablestyle}>
<Button bsStyle="warning" onClick={e => this.handleButtonClick(e, row)}>Edit</Button>
</div>
)
},
]
return (
<div className="container">
{this.state.visible && <Modal
title="title"
visible={this.state.visible}
onClickAway={() => this.closeModal()}
>
<section>
{/*<p> {this.state.createdAt}dsds</p>*/}
{alert("Output: "+this.state.data.Issue)}
</section>
</Modal>}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css"></link>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossOrigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossOrigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossOrigin="anonymous"></script>
{/*<---CSS & Bootstrap Scripts/Links*/}
<h2 className="h2_style">Sumbong Center</h2>
{/*<div className="searchBar">*/}
{/*<input type="text" style={SearchBox_Sumbong} className="CircularInput" id="DocsSearchBar"*/}
{/*placeholder="Search applicant's name..."/>*/}
{/*</div>*/}
<ReactTable
style={tableFont}
filterable={true}
defaultFilterMethod={filterCaseInsensitive}
columns={columns}
defaultPageSize={5}
className="-striped -highlight"
data={this.state.data}
>
</ReactTable>
</div>
);
}
}
export default Sumbong;