如何为Material-Table选择复选框设置自定义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

onSelectionChange传递一系列选定的行。所以数据参数没有id。

对于自动完成搜索字段，您可以在github上打开功能请求问题。

Answer 2

您不应该直接更改状态，而是使用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 3

你调用错误，当你在Options中激活选择时，你必须像数组一样使用dataRow。所以这是一个如何使用它的例子qazxsw poi

另外关于autodfill，它现在在这个表中是不可用的，但是如果你在远程模式下使用表，你几乎可以有相同的效果，因为它会在表中显示出来的元素

我希望我能帮助问候