Реакция: подать состояние при щелчке на поле данных в компонент, реагирующий на bootstrap - PullRequest
0 голосов
/ 10 марта 2020

Я использую данные из моего бэкэнда и переводю их в состояние, а затем отображаю мои данные в таблице таким образом. Но я изо всех сил пытаюсь привязать кнопку, которая может изменить поле данных, в которое государство подает данные. вот что у меня есть до сих пор

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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...