Как я могу использовать материал-UI лаборатории - компонент checkboxestag в другом компоненте класса?

Question

У меня есть Add. js, который содержит основную форму. У меня есть CheckboxesTags. js, который является компонентом функции. Мне нужно получить выбранные элементы CheckboxesTags. js в Add. js для отправки по оси ios с другими значениями. Я добавил <CheckboxesTags onChange={(e)=>{console.log(e.currentTarget);}} />, но не могу получить значения.

Add. 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 - это в точности код материала-интерфейса:

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
})

Answer 1

Вам может потребоваться проверить формат response.data с console.log(response.data), потому что options в Autocomplete является массивом. Если это возвращаемые объекты массива, вам может потребоваться использовать Object.keys() (чтобы получить объект данных в массив), чтобы получить массив optins.

Answer 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.