Как экспортировать функциональный компонент без сохранения состояния со стилями в Reactjs

Пример с помощью camickr, вероятно, является более многоразовым решением, но ради образования ...

  • Оказание ячеек является областью представления
  • Модель никогда не должна содержать компонентов, особенно если вы думаете о ее передаче на экран, это просто неправильный подход ...
  • Вам нужно настроить TableCellEditor, который будет действовать как средство, с помощью которого вы можете получить уведомление о действиях редактирования (щелчок мышью или нажатие)

Это простой пример, для простоты я использовал кнопку DefaultTableModel, поскольку он имеет хороший метод removeRow, но, возможно, вы могли бы использовать любой TableModel, если бы вы предоставили средства для удаления строки и изменения в редакторе для ее поддержки ...

enter image description here [/g2]

import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.EventObject;
import javax.swing.AbstractCellEditor;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.UIManager;
import javax.swing.event.CellEditorListener;
import javax.swing.table.AbstractTableModel;
import javax.swing.table.DefaultTableModel;
import javax.swing.table.TableCellEditor;
import javax.swing.table.TableCellRenderer;
import javax.swing.table.TableModel;

public class ButtonExample {

    public JTable table;

    public static void main(String[] args) {
        final ButtonExample example = new ButtonExample();
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                example.createAndShowGUI();
            }
        });
    }

    private void createAndShowGUI() {
        JFrame frame = new JFrame("Button Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        table = new JTable(new ExampleTableModel());
        JScrollPane scrollPane = new JScrollPane(table);
        table.setFillsViewportHeight(true);

        table.getColumn("action").setCellRenderer(new ButtonCellRenderer());
        table.getColumn("action").setCellEditor(new ButtonCellEditor());

        frame.getContentPane().add(scrollPane, BorderLayout.CENTER);
        frame.pack();
        frame.setVisible(true);
    }

    public static class ExampleTableModel extends DefaultTableModel {

        public ExampleTableModel() {
            super(new Object[]{"id", "stuff", "blah", "action"}, 0);
            for (int index = 0; index < 10; index++) {
                addRow(new Object[]{index, "Text for " + index, "Na na", index});
            }
        }

        @Override
        public boolean isCellEditable(int rowIndex, int columnIndex) {
            return columnIndex == 3;
        }

    }

    public static class ButtonCellRenderer extends JButton implements TableCellRenderer {

        @Override
        public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
            if (value != null) {
                setText("Delete row " + value.toString());
            } else {
                setText("Delete Me");
            }
            if (isSelected) {
                setForeground(table.getSelectionForeground());
                setBackground(table.getSelectionBackground());
            } else {
                setForeground(table.getForeground());
                setBackground(UIManager.getColor("Button.background"));
            }
            return this;
        }
    }

    public static class ButtonCellEditor extends AbstractCellEditor implements TableCellEditor {

        private JButton editor;
        private Object value;
        private int row;
        private JTable table;

        public ButtonCellEditor() {
            editor = new JButton();
            editor.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    if (table != null) {
                        fireEditingStopped();
                        TableModel model = table.getModel();
                        if (model instanceof DefaultTableModel) {
                            ((DefaultTableModel) model).removeRow(row);
                        }
                    }
                }
            });
        }

        @Override
        public boolean isCellEditable(EventObject e) {
            return true;
        }

        @Override
        public Object getCellEditorValue() {
            return value;
        }

        @Override
        public Component getTableCellEditorComponent(JTable table, Object value, boolean isSelected, int row, int column) {
            this.table = table;
            this.row = row;
            this.value = value;
            if (value != null) {
                editor.setText("Delete row " + value.toString());
            } else {
                editor.setText("Delete Me");
            }
            if (isSelected) {
                editor.setForeground(table.getSelectionForeground());
                editor.setBackground(table.getSelectionBackground());
            } else {
                editor.setForeground(table.getForeground());
                editor.setBackground(UIManager.getColor("Button.background"));
            }
            return editor;
        }
    }

}

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

Это всего лишь личный предпочтение, но я предпочитаю использовать панель инструментов или пункт меню и привязки клавиш для обеспечения этой поддержки. Кнопки в таблице просто выглядят так ... датировано - IMHO

0
задан Mowzer 18 February 2019 в 17:58
поделиться

3 ответа

  1. Вам необходимо включить ключевое слово default в ваш экспорт.
  2. Чтобы получить доступ к классам, которые создает withStyles, вам необходимо получить к ним доступ через реквизиты с помощью props.classes.button
  3. Также необходимо убедиться, что withStyles передает свойство theme в функцию стилей. По умолчанию установлено значение false . Без этого вы не сможете получить доступ к таким свойствам, как theme.spacing.unit.

В итоге вам нужно изменить свою последнюю строку следующим образом:

export default withStyles(styles, { withTheme: true })({ MyRegularButton, MyStyledButton })
0
ответ дан Mowzer 18 February 2019 в 17:58
поделиться

В дополнение к принятому ответу также необходимо добавить classes к объекту input props следующим образом.

const MyStyledButton = ({ classes, }) => (...

Таким образом, весь файл выглядит следующим образом. (Правка: включенный ответ @MattC)

MyButtons.js
import React from 'react';
import { withStyles, } from '@material-ui/core';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const MyRegularButton = props => (<Button>Click me!</Button>);

const MyStyledButton = ({ classes, }) => (
  <Button className={classes.button}>Click me!</Button>
);

export default withStyles(styles, { withTheme: true })({ MyRegularButton, MyStyledButton })
0
ответ дан Mowzer 18 February 2019 в 17:58
поделиться

Вы забыли ключевое слово default:

export default withStyles(styles)({ MyRegularButton, MyStyledButton })
0
ответ дан Treycos 18 February 2019 в 17:58
поделиться
Другие вопросы по тегам:

Похожие вопросы: