如何在另一个类组件中使用 material-ui lab - checkboxestag 组件？答案

【问题标题】：how can I use material-ui lab - checkboxestag component in another class component?如何在另一个类组件中使用 material-ui lab - checkboxestag 组件？
【发布时间】：2020-03-05 16:18:51
【问题描述】：

我有一个包含主窗体的 Add.js。我有一个 CheckboxesTags.js 是一个函数组件。我需要在 Add.js 中获取 CheckboxesTags.js 的选定项目，以通过 axios 发送其他值。我添加了<CheckboxesTags onChange={(e)=>{console.log(e.currentTarget);}} />，但我无法获取值。

添加.js：

import React, { Component } from 'react';
import CheckboxesTags from './CheckboxesTags'

class Add extends Component {
    constructor() {
        super();

}

render() {
return (
<div >
        <CheckboxesTags onChange={(e)=>{console.log(this.props);}}  />
</div>
    )
}
}
export default Add;

而 CheckboxesTags.js 正是 material-ui 代码：

import React from 'react';
import axios from 'axios'
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;



export default function CheckboxesTags() {

  return (
    <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      onChange={(e)=>{console.log(e.currentTarget);}}
      options={optins}
      disableCloseOnSelect
      getOptionLabel={option => option.name}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.name}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => (
        <TextField {...params} variant="outlined" label="Options" placeholder="Favorites" />
      )}
    />
  );
}


let optins = [

];
axios.get('http://localhost:5000/api/products/notes').then(response => {
  optins = response.data
})

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可能需要使用console.log(response.data) 测试response.data 的格式，因为Autocomplete 中的options 是数组。
如果它是数组的返回对象，您可能需要使用Object.keys()（获取数据对象到一个数组）来获取optins数组。

【讨论】：

【解决方案2】：

基本上你需要从父组件向下传递点击处理程序。像这样的东西（未测试）：

import React, { Component } from 'react';
import CheckboxesTags from './CheckboxesTags';

class Add extends Component {
  constructor(props) {
    super(props);
  }

  handleTagClick = tag => console.log(tag);

  render() {
    return (
      <div>
        <CheckboxesTags onSelect={this.handleTagClick} />
      </div>
    );
  }
}
export default Add;

import React from 'react';
import axios from 'axios';
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export default function CheckboxesTags(props) {
  const { onSelect } = props;
  return (
    <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      onChange={(event, value) => {
        onSelect(value);
      }}
      options={optins}
      disableCloseOnSelect
      getOptionLabel={option => option.name}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.name}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => (
        <TextField
          {...params}
          variant="outlined"
          label="Options"
          placeholder="Favorites"
        />
      )}
    />
  );
}

由于您已经将onChange 事件附加到Autocomplete 元素，这将触发其中包含的任何代码。在这种情况下，它将是传递下来的 onSelect 函数。

【讨论】：