我尝试将组件作为数据添加到材料表中，但我无法访问组件的“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>
);
}
}