我试图将组件作为材料表中的数据添加,但是我无法访问组件的“ this”上下文来更新onChange函数中的状态。物料表提供的可编辑功能不符合我的要求。
class ClubList extends Component {
state = { clubs: '',tableclubs: [] };
changeDate=(change)=>{
console.log(this) //returns undefined. I need to update state here but not able to access 'this' context of component
}
addClub = (event,clubs) => {
let enteredClubs = this.state.clubs;
let allClubs = this.props.clubs;
let tableclubs = [];
let enteredClubsArray = enteredClubs.split(/[,]+/);
for (let clubs in enteredClubsArray) {
tableclubs.push(allClubs.find(({ number }) => number == enteredClubsArray[clubs]));
}
tableclubs.map(
(clubs) => (
(clubs.scheduledDate = (
<DateComponent name="eventDate"
value={this.props.createData.eventDate}
handleChange={this.changeDate} /> //Im calling the function here
)),(clubs.city = clubs.city)
)
);
this.setState({ clubs: '',tableclubs });
this.clubsForCreate(tableclubs);
};
render() {
return (
<div classname="clubSection">
<TextComponent
label="Enter Clubs"
name="clubs"
variant="outlined"
handleChange={this.changeState}
value={this.state.clubs}
/>
<Fab color="primary" aria-label="add" onClick={this.addClub} classname="clubAddButton">
<MaterialTable
title="Clubs"
columns={[
{ title: 'Date',field: 'scheduledDate' },{ title: 'Status',field: 'statusDesc' },]}
data={this.state.tableclubs}
/>
</div>
);
}
}