Как установить пользовательские функции onChange onClick для флажков выбора таблицы материалов?

Question

У меня вопрос: у меня есть пользовательские функции onClick и onChange, которые я хочу включить в флажки выбора

Как этого добиться?Так что, когда кто-то выбирает флажок, сгенерированный из MT, он запускает пользовательские onClick и onChange?

, также задаваясь вопросом о возможности добавления автозаполнения для панели поиска?

т.е. вы запускаетевведите значение, и оно даст вам значения, которые совпадают с данными в данных или 5 верхними значениями или чем-то в данных, и позволяет пользователю заполнить автозаполнение, щелкнув параметры раскрывающегося списка.

  state = {
    items: [],
    chosen: [],
    selected: []
  }

  toggle = (id) => {

    const selected = this.state.selected;

    if (selected.includes(id)) selected.splice(selected.indexOf(id), 1); else selected.push(id);

    this.setState({ selected });
    localStorage.setItem('chosen', JSON.stringify(selected));

    console.log(this.state)

  }

  async componentDidMount() {

    this.setState({
      items: await (await fetch(`${process.env['REACT_APP_API']}/items`)).json(),
      selected: JSON.parse(localStorage.getItem('chosen')) || []
    }); 

  }

render() {
return (

<Fragment>
 <MaterialTable
  columns={[
    { 
      title: 'myChecbox',
      render: rowData => {
        return (
          {/* THIS WORKS AS IT SHOULD  */}
          <input className="toggle_checkbox toggle" type="checkbox" checked={this.state.selected.includes(rowData.id)} onChange={this.toggle.bind(this, rowData.id)} />
        )
      },
      cellStyle: {
        width:20,
        maxWidth:20,
        padding:20
      },
      headerStyle: {
      width:20,
      maxWidth:20,
      padding:20
      }
    },
    { 
      title: 'Logo', field: 'name',
      render: rowData => {
        return (

          <a href={rowData.link} key={rowData.id}>
            <img className="image" src={rowData.logo} alt={rowData.name} />
          </a> 
        )
      }
    },
    { 
      title: 'Name', field: 'name',
      render: rowData => {
        return (

          <a href={rowData.link} key={rowData.id}>
            <div className="NameContainer">
              <h5>{rowData.name}</h5>
              <span>{rowData.type}</span>
            </div>
          </a>

        )
      }
    },
    { 
      title: 'score', field: 'score', 
      cellStyle: data => {
        if (data === "N/A") {
          return {
            color: "#aaa",
          }
        }
      } 
    },
    { title: 'Size', field: 'size' },
  ]}

  data=
    {
      this.state.items.length ? this.state.items.map((item) => (
        { 
          id: item.id,  
          logo: item.Logo.url, 
          name: item.Name,
          type: item.Type.replace(/_/g, ' '),
          score: item.Score, 
          size: item.Size
        }
      )) : [{ name: 'LOADING' }]
    }

  options={{
    maxBodyHeight: 1000,
    grouping: true,
    selection: true,
    pageSize: 10,
    doubleHorizontalScroll: true,

  }}

{/* I CANT GET THIS TO WORK =/ */}
  onRowClick={(event, rowData) => { this.state.selected.includes(rowData.id); }}
  onSelectionChange={data => {this.toggle.bind(this, data.id)}}
 />
</Fragment>

);
}
});

Answer 1

Вы не должны напрямую изменять состояние, вместо этого используйте setState.

import React, { Fragment, Component } from "react";
import MaterialTable from "material-table";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    items: [],
    chosen: [],
    selected: []
  };

  toggle = id => {
    const selected = this.state.selected;

    if (selected.includes(id)) selected.splice(selected.indexOf(id), 1);
    else selected.push(id);

    this.setState({ selected });
    localStorage.setItem("chosen", JSON.stringify(selected));

    console.log(this.state);
  };

  async componentDidMount() {
    this.setState({
      items: await (await fetch(
        `${process.env["REACT_APP_API"]}/items`
      )).json(),
      selected: JSON.parse(localStorage.getItem("chosen")) || []
    });
  }

  render() {
    return (
      <Fragment>
        <MaterialTable
          columns={[
            {
              title: "myChecbox",
              render: rowData => {
                return (
                  <input
                    className="toggle_checkbox toggle"
                    type="checkbox"
                    checked={this.state.selected.includes(rowData.id)}
                    onChange={this.toggle.bind(this, rowData.id)}
                  />
                );
              },
              cellStyle: {
                width: 20,
                maxWidth: 20,
                padding: 20
              },
              headerStyle: {
                width: 20,
                maxWidth: 20,
                padding: 20
              }
            },
            {
              title: "Logo",
              field: "name",
              render: rowData => {
                return (
                  <a href={rowData.link} key={rowData.id}>
                    <img
                      className="image"
                      src={rowData.logo}
                      alt={rowData.name}
                    />
                  </a>
                );
              }
            },
            {
              title: "Name",
              field: "name",
              render: rowData => {
                return (
                  <a href={rowData.link} key={rowData.id}>
                    <div className="NameContainer">
                      <h5>{rowData.name}</h5>
                      <span>{rowData.type}</span>
                    </div>
                  </a>
                );
              }
            },
            {
              title: "score",
              field: "score",
              cellStyle: data => {
                if (data === "N/A") {
                  return {
                    color: "#aaa"
                  };
                }
              }
            },
            { title: "Size", field: "size" }
          ]}
          data={
            this.state.items.length
              ? this.state.items.map(item => ({
                  id: item.id,
                  logo: item.Logo.url,
                  name: item.Name,
                  type: item.Type.replace(/_/g, " "),
                  score: item.Score,
                  size: item.Size
                }))
              : [{ name: "LOADING" }]
          }
          options={{
            maxBodyHeight: 1000,
            grouping: true,
            selection: true,
            pageSize: 10,
            doubleHorizontalScroll: true
          }}
          onRowClick={(event, rowData) => {
            this.setState({
              selected: [...this.state.selected, rowData.tableData.id]
            });
          }}
          onSelectionChange={data => {
            this.toggle.bind(this, data.id);
          }}
        />
      </Fragment>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Вы ошибаетесь, когда вы активировали выбор в Options, вы должны использовать dataRow как массив.Итак, вот пример того, как его использовать https://codesandbox.io/s/7zz0v3m91x

Также, что касается autodfill, он сейчас недоступен в этой таблице, но если вы используете таблицу, как в удаленном режиме, вы можете получить почти тот же эффектпотому что в таблице появится элемент, который соответствует

Я надеюсь, что смогу помочь. С уважением

Answer 3

onSelectionChange передать массив выбранных строк. Таким образом, параметр данных не имеет идентификатора.

для автоматического заполнения поля поиска вы можете открыть вопрос о запросе на github.