Я использую данные из моего бэкэнда и переводю их в состояние, а затем отображаю мои данные в таблице таким образом. Но я изо всех сил пытаюсь привязать кнопку, которая может изменить поле данных, в которое государство подает данные. вот что у меня есть до сих пор
import React, { useEffect} from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
const columns = [
{
dataField: "foodname",
text: "Food",
sort: true
},
{
dataField: "plates",
text: "Plates",
sort: true
}
];
const defaultSorted = [
{
dataField: "foodname",
order: "desc"
}
];
export default class Table extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
mainCourse: [],
starters: []
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('not sure what should be my argument');
}
async componentDidMount() {
try {
const res = await axios.get('api/starters')
this.setState({
starters: res.data[0].starters,
});
} catch (error) {
this.setState({
error
});
throw(error);
}
try {
const resp = await axios.get('api/maincourse')
this.setState({
mainCourse: resp.data[0].mainCourse
});
} catch (error) {
this.setState({
error
});
throw(error);
}
};
render() {
return (
<div>
<h5>Menu One</h5>
<button onClick={this.handleClick} style={{margin: "10px 0px 10px" }}>Main Course</button>
<BootstrapTable
bootstrap4
keyField="id"
data={this.state.starters} <-- want to have an onClick where the button changes this
to Main Course state -->
columns={columns}
defaultSorted={defaultSorted}
/>
</div>
);
}
}
Я знаю, что я на правильном пути, но я не могу разобраться с этим. Желаемый эффект - если нажать кнопку «Основной курс», то она захватывает состояние mainCourse (которое mainCourse: resp.data[0].mainCourse
), а затем выгружает и заменяет состояние, которое ранее было в поле данных компонента bootstrap -table.