material-table - 如何为材料表选择复选框设置自定义 onChange onClick 函数？

问题描述

我有一个问题：我有一个想要包含在选择复选框中的自定义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>

);
}
});

标签： material-table

material-table - 如何为材料表选择复选框设置自定义 onChange onClick 函数？

问题描述

解决方案

推荐阅读