Question

使用了redux，react和material-ui lib 我有使用react和redux的react组件。收到来自redux的状态，因此，此组件：

import React from "react";
import {withStyles} from "material-ui/styles";
import {MenuItem} from "material-ui/Menu";
import Chip from "material-ui/Chip";
import CancelIcon from "@material-ui/icons/Cancel";
import Input from "material-ui/Input";
import Select from "react-select";
import Typography from "material-ui/Typography";

const ITEM_HEIGHT = 48;

const styles = theme => ({
  // Autocomplete styles
  "@global": {
    ".Select-control": {
      display: "flex",
      alignItems: "center",
      border: 0,
      height: "auto",
      background: "transparent",
      "&:hover": {
        boxShadow: "none",
      },
    },
    ".Select-multi-value-wrapper": {
      flexGrow: 1,
      display: "flex",
      flexWrap: "wrap",
    },
    ".Select--multi .Select-input": {
      margin: 0,
    },
    ".Select.has-value.is-clearable.Select--single > .Select-control .Select-value": {
      padding: 0,
    },
    ".Select-noresults": {
      padding: theme.spacing.unit * 2,
    },
    ".Select-input": {
      display: "inline-flex !important",
      padding: 0,
      height: "auto",
    },
    ".Select-input input": {
      background: "transparent",
      border: 0,
      padding: 0,
      cursor: "default",
      display: "inline-block",
      fontFamily: "inherit",
      fontSize: "inherit",
      margin: 0,
      outline: 0,
    },
    ".Select-placeholder, .Select--single .Select-value": {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      display: "flex",
      alignItems: "center",
      fontFamily: theme.typography.fontFamily,
      fontSize: theme.typography.pxToRem(16),
      padding: 0,
    },
    ".Select-placeholder": {
      opacity: 0.42,
      color: theme.palette.common.black,
    },
    ".Select-menu-outer": {
      backgroundColor: theme.palette.background.paper,
      boxShadow: theme.shadows[2],
      position: "absolute",
      left: 0,
      top: `calc(100% + ${theme.spacing.unit}px)`,
      width: "100%",
      zIndex: 2,
      maxHeight: ITEM_HEIGHT * 7.7,
    },
    ".Select.is-focused:not(.is-open) > .Select-control": {
      boxShadow: "none",
    },
    ".Select-menu": {
      maxHeight: ITEM_HEIGHT * 7.7,
      overflowY: "auto",
    },
    ".Select-menu div": {
      boxSizing: "content-box",
    },
    ".Select-arrow-zone, .Select-clear-zone": {
      color: theme.palette.action.active,
      cursor: "pointer",
      height: 21,
      width: 21,
      zIndex: 1,
    },
    ".Select-aria-only": {
      position: "absolute",
      overflow: "hidden",
      clip: "rect(0 0 0 0)",
      height: 1,
      width: 1,
      margin: -1,
    },
    autocomlete: {
      paddingBottom: 30,
      marginRight: 20,
      fontWeight: 200,
      paddingRight: 20,
      width: 750,
    },
  },
});

/* eslint-disable react/prop-types */
const Option = ({isFocused, isSelected, onFocus = () => {}, children = [], onSelect = () => {}, option}) => {
  const handleClick = event => onSelect(option, event);
  return (
    <MenuItem
      onFocus={onFocus}
      selected={isFocused}
      onClick={handleClick}
      component="div"
      style={{fontWeight: isSelected ? 500 : 400}}
    >
      {children}
    </MenuItem>
  );
};

/* eslint-disable react/prop-types */
const SelectWrapped = (props) => {
  const {classes, ...other} = props;
  return (
    <Select
      optionComponent={Option}
      noResultsText={<Typography>No results found</Typography>}
      valueComponent={(valueProps) => {
        const {value, children, onRemove} = valueProps;
        const onDelete = (event) => {
          event.preventDefault();
          event.stopPropagation();
          onRemove(value);
        };
        if (onRemove) {
          return (
            <Chip
              tabIndex={-1}
              label={children}
              className={classes.chip}
              deleteIcon={<CancelIcon onTouchEnd={onDelete}/>}
              onDelete={onDelete}
            />
          );
        }
        return <div className="Select-value">{children}</div>;
      }}
      {...other}
    />
  );
};

/* eslint-disable react/prop-types */
const Autocomplete = ({items = [], handleChange, selectedItems = [], multi, changeSelectionActionName}) => (
  <div className={styles.autocomlete}>
    <Input
      fullWidth
      inputComponent={SelectWrapped}
      value={selectedItems}
      onChange={handleChange(changeSelectionActionName)}
      placeholder="Выберите из списка или начните вводить название"
      name="react-select-chip"
      inputProps={{
        multi,
        classes: styles,
        instanceId: "react-select-chip",
        id: "react-select-chip",
        options: items.map(item => ({value: item.id, label: item.name})),
      }}
    />
  </div>);

export default withStyles(styles)(Autocomplete);

好的，我可以选择项目，显示更改，但是，当我第一次单击自动完成时，控制台中会显示警告消息：

    warning.js:1 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Select`.
    in Option (created by Select)
    in div (created by Select)
    in div (created by Select)
    in div (created by Select)
    in Select (created by SelectWrapped)
    in SelectWrapped (created by Input)
    in div (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by Autocomplete)
    in div (created by Autocomplete)
    in Autocomplete (created by WithStyles(Autocomplete))
    in WithStyles(Autocomplete) (created by DivisionReport)
    in span (created by DivisionReport)
    in div (created by DivisionReport)
    in DivisionReport (created by WithStyles(DivisionReport))
    in WithStyles(DivisionReport) (created by OvertimesReport)
    in div (created by Typography)
    in Typography (created by WithStyles(Typography))

那么，如何从控制台中删除此警告消息？

Answer 1

这将从控制台中删除所有警告。我的建议是保留它并处理您的错误。显然react-select需要包装在类组件中。

如何从控制台中删除警告？

1 个答案: