Witam.
Mam dziwny problem z konfigurowaniem własnego okna do dodawania rekordów.
Udało mi się dodać DropDownList jednak wartości nie są wczytywane przy kliknięciu zapisu.
Dostaję takie błąd :
InsertModalBody.js:55 Uncaught TypeError: Cannot read property 'value' of undefined
at InsertModalBody.<anonymous> (InsertModalBody.js:55)
at Array.forEach (<anonymous>)
at InsertModalBody.getFieldValue (InsertModalBody.js:45)
at InsertModal.__handleSave__REACT_HOT_LOADER__ (InsertModal.js:71)
at InsertModal._this.handleSave (InsertModal.js:58)
at InsertModalFooter.__handleSaveBtnClick__REACT_HOT_LOADER__ (InsertModalFooter.js:82)
at InsertModalFooter._this.handleSaveBtnClick (InsertModalFooter.js:50)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at Object.invokeGuardedCallback (react-dom.development.js:438)
at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:452)
at executeDispatch (react-dom.development.js:836)
at executeDispatchesInOrder (react-dom.development.js:855)
at executeDispatchesAndRelease (react-dom.development.js:956)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:967)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:935)
at processEventQueue (react-dom.development.js:1112)
at runEventQueueInBatch (react-dom.development.js:3607)
at handleTopLevel (react-dom.development.js:3616)
at handleTopLevelImpl (react-dom.development.js:3347)
at batchedUpdates (react-dom.development.js:11082)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)
Mój kod - nie ma żadnych zapytani na api na razie, chciałem sprawdzić czy działa to chociaż na zamockowanych danych.
import React from 'react';
import { connect } from "react-redux";
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {
users_getFullInfo,
users_delete } from '../actions/UsersActions';
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
class CustomDropdownInsert extends React.Component {
getFieldValue = () => {
console.log('here');
return '1';
}
render() {
console.log(this.props);
const options = [
{ value: 1, label: 'One' },
{ value: 2, label: 'Two' }
]
const defaultOption = options[0]
return (
<Dropdown
ref={`${this.props.attr.ref}`}
options={options}
value={defaultOption}
placeholder="Select an option" />
);
}
}
class UsersAdmin extends React.Component{
componentDidMount(){
this.props.users_getFullInfo(this.props.user.token);
}
onAfterDeleteRow = (row) => {
for(let i = 0; i < row.length; i++){
console.log(row[i]);
this.props.users_delete(
this.props.user.token,
row[i]
)
}
}
onAfterInsertRow = (row) => {
}
buildingDropDownList = (column, attr, editorClass, ignoreEditable) => {
return (
<CustomDropdownInsert attr={attr} />
);
}
render(){
var selectRowProp = {
mode: "checkbox",
clickToSelect: true,
bgColor: "rgb(238, 193, 213)"
};
const options = {
afterInsertRow: this.onAfterInsertRow,
afterDeleteRow: this.onAfterDeleteRow
};
return (
<BootstrapTable
data={this.props.users}
striped
hover
condensed
selectRow={selectRowProp}
deleteRow
insertRow
search
options={options}>
<TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
<TableHeaderColumn hidden dataField='username'>Nazwa użytkownika</TableHeaderColumn>
<TableHeaderColumn dataField='buildingId' customInsertEditor={ { getElement: this.buildingDropDownList } }>Budynek</TableHeaderColumn>
<TableHeaderColumn dataField='roleName'>Rola</TableHeaderColumn>
<TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
<TableHeaderColumn hidden dataField='password'>Hasło</TableHeaderColumn>
</BootstrapTable>
);
}
}
// add buildingName later
const mapStateToProps = (state) => {
return {
user: state.user,
users: state.users
}
}
export default connect(mapStateToProps, { users_getFullInfo, users_delete })(UsersAdmin);