Как изменить данные таблицы в реакции с кнопками в модальном - PullRequest
Новая
       4

Как изменить данные таблицы в реакции с кнопками в модальном

0 голосов
/ 29 марта 2020

Привет, у меня проблема с моими реактивными компонентами. Я не знаю, как обновить элемент в таблице из общего модального для всех элементов. В моем реальном случае у меня есть расписание студентов, и я должен редактировать столбцы с предметами. После того, как я нажму на тему в таблице, модал должен открыться, и после того, как я выбрал тему, которую я хочу ввести, она должна измениться. Я подготовил основную c модель ситуации на codeblox. Пожалуйста, как мне получить доступ к указанному столбцу c через этот мод и обновить этот столбец значением кнопки. Спасибо за справку вставить его обратно .. ИДК, почему, но другие это не работает. !!! я не смог запустить bootstrap, но это не важно 

import ReactDOM from "react-dom";
import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

export default class Col extends Component {
  render() {
    return <div>{this.props.data}</div>;
  }
}

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { Firstname: "Jill", Lastname: "Bill", Age: 18 },
        { Firstname: "Jill2", Lastname: "Bill2", Age: 180 },
        { Firstname: "Jill3", Lastname: "Bill3", Age: 1 }
      ],
      modal: false
    };
  }

  renderColumn() {
    return this.state.items.map(i => (
      <tr>
        <td>
          <Col data={i.Firstname} />
        </td>
        <td>
          <Col data={i.Lastname} />
        </td>
        <td>
          <Col data={i.Age} />
        </td>
      </tr>
    ));
  }

  render() {
    return (
      <div>
        <table>
          <thead />
          <tbody>{this.renderColumn()}</tbody>
        </table>
        <Button
          variant="primary"
          onClick={() => this.setState({ modal: true })}
        >
          Launch vertically centered modal
        </Button>
        <p>------------------------------------------------------</p>
        <MyModal
          show={this.state.modal}
          onHide={() => this.setState({ modal: true })}
        />
      </div>
    );
  }
}

export class MyModal extends Component {
  render() {
    return (
      <Modal.Dialog>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <p>Modal body text goes here.</p>
        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary">Mark</Button>
          <Button variant="primary">Joseph</Button>
        </Modal.Footer>
      </Modal.Dialog>
    );
  }
}
ReactDOM.render(<Todo />, document.getElementById("root"));

Реальная ситуация выглядит следующим образом: Модальный

Эти синие кнопки - предметы. После того, как я нажму одну из кнопок в расписании -> откроется модальное окно, и после того, как я выберу одну -> значение в расписании должно измениться

1 Ответ

1 голос
/ 29 марта 2020

Этот сценарий может работать для вас:

  1. добавить selectedStudent: null, в состояние компонента Todo
  2. удалить кнопку с текстом «Запуск вертикально центрированного модала»
  3. добавить новую кнопку в каждый ряд студентов. Назовите его чем-то вроде «Select»
  4. , добавьте новый метод для компонента Todo, например, selectStudent, который будет иметь один аргумент - объект ученика Также этот метод может использовать setState с обратным вызовом. Обратный вызов откроет модальный (путем изменения состояния modal: true). Этот метод запускается, когда вы нажимаете кнопку «Выбрать»
  5. передаете новую опору модальному: selectedStudent, значение которого будет this.state.selectedStudent
  6. , когда модальное закроется - установите selectedStudent до null снова

Если что-то здесь сбивает с толку или вам нужны дополнительные объяснения, пожалуйста, спросите

NB, вы также можете вывести ключ modal из состояния и условно сделать модальный только когда selectedStudent является объектом. Когда selectedStudent равно null - модальное окно должно быть закрыто.

...