Редактор таблиц React-DataDialog закрывается нажатием dropDown без тигра на Изменить

Question

Я использую реагировать-данные table, чтобы показать матрицу / сетку данных. Я переписал dataEditor , чтобы открыть пользовательское диалоговое окно, в котором вы можете выбрать только предварительно выбранные значения из material-ui . Но если вы выберете значение в раскрывающемся диалоговом окне, диалоговое окно будет закрыто без вызова функции onChange.

Я перестроил проблему в коде-окне: https://codesandbox.io/s/rough-moon-4cfe3

Если я использую собственный выпадающий список, я могу выбрать значение, и моя функция onChange будет активирована:

<Select native onChange={handleChange} value={currentValue}> in src/components/EditorDialog.js:17

Answer 1

Хорошо, так вот решение, которое должно избавить от всех проблем, которые вызваны использованием Material UI Select внутри ReactDataSheet.

Я извлек EditorDialog, поэтому он отображается нижеReactDataSheet и, следовательно, не вызывает событие onMouseDown для cell.

Вот упрощенная версия кода:

Вы можете использовать onClose безпараметры внутри EditorDialog, чтобы закрыть диалоговое окно!

import React from 'react'
import ReactDataSheet from 'react-datasheet'

import EditorDialog from './EditorDialog'

export default class Datasheet extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      editorProps: null,
      grid: [[{ value: 1 }, { value: 3 }], [{ value: 2 }, { value: 4 }]]
    }
  }

  handleDataEditor: Function = editorProps => {
    this.setState({ editorProps })

    if (!editorProps) {
      return null
    }

    return <span>{editorProps.value}</span>
  }

  render() {
    return (
      <>
        <ReactDataSheet
          data={this.state.grid}
          // ...
          dataEditor={this.handleDataEditor}
        />
        <EditorDialog {...editorProps} onClose={this.handleDataEditor} />
      </>
    )
  }
}

Answer 2

Я наконец нашел проблему через 2 часа.

Datasheet.js

В вашем Datasheet.js проблема была из-за onMouseDownобработчик обратного вызова в вашей ячейке. Удаление этого исправит проблему onChange, не запускаемую в Select компоненте.

Бонус:

Я скопировал обработчик обратного вызова onCellsChanged из здесь напрямую.

import React from "react";
import ReactDataSheet from "react-datasheet";

import EditorDialog from "./EditorDialog";

export default class Datasheet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grid: [[{ value: 1 }, { value: 3 }], [{ value: 2 }, { value: 4 }]]
    };
  }

  render() {
    return (
      <>
        <ReactDataSheet
          data={this.state.grid}
          // Copied from https://github.com/nadbm/react-datasheet#basic-usage
          onCellsChanged={changes => {
            const grid = this.state.grid.map(row => [...row])
            changes.forEach(({cell, row, col, value}) => {
              grid[row][col] = {...grid[row][col], value}
            })
            this.setState({ grid })
          }}
          valueRenderer={cell => cell.value}
          // The issue was because of the onMouseDown callback
          cellRenderer={({ onDoubleClick, children, className }) => {
            return (
              <td onDoubleClick={onDoubleClick} className={className}>
                {children}
              </td>
            )
          }}
          dataEditor={EditorDialog}
        />
      </>
    );
  }
}

---

EditorDialog.js

В вашем EditorDialog.js вам фактически не нужно внутреннее состояние, если компоненты не ведут себя как форма(Пример: с входами, кнопками подтверждения / отмены). Я также добавил несколько комментариев в коды. Слегка изменили приведенные вами примеры кода. Вы можете использовать onCommit обратный вызов вместо onChange, как обычно, это щелчок, чтобы определить значение (не ввод в текстовое поле). Вы можете узнать больше о dataEditor доступных опорах здесь

import React from "react";
import { Select } from "@material-ui/core";

import "../styles.css";

// Bonus: You can get your current editing cell value inside your props directly,
// instead of using `cell.value`
export default function EditorDialog({ onCommit, value }) {
  // You actually don't need internal state here, unless it behaves like a form.

  const handleChange = event => {
    const { value: newValue } = event.target;
    // Calling onCommit will close the Select and
    // call `onCellsChanged` callback in React Datasheet.
    onCommit(newValue);
  };

  return (
    <div className="Dialog">
      <Select onChange={handleChange} value={value}>
        <option value="" />
        <option value={1}>1</option>
        <option value={2}>2</option>
        <option value={3}>3</option>
        <option value={4}>4</option>
        <option value={5}>5</option>
        <option value={6}>6</option>
        <option value={7}>7</option>
      </Select>
    </div>
  );
}