时间戳

首页 > 解决方案 > 如何在另一个类组件中使用 material-ui lab - checkboxestag 组件？

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

问题描述

我有一个包含主窗体的 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
})

标签： reactjsmaterial-ui

解决方案

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

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函数。

推荐阅读