React mui autocomplete select не показывает значение - PullRequest
Новая
       1

React mui autocomplete select не показывает значение

1 голос
/ 21 мая 2019

Я реализую поле выбора автозаполнения из библиотеки реагирует mui с react-select. Я использовал код из их демонстрации, но вместо того, чтобы обрабатывать onChange и указывать состояние локально, я делаю это из другого компонента, который является родительским для компонента автозаполнения select.

Это моя реализация: 

function NoOptionsMessage(props) {
  return (
    <Typography
      color="textSecondary"
      className={props.selectProps.classes.noOptionsMessage}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  );
}

function inputComponent({ inputRef, ...props }) {
  return <div ref={inputRef} {...props} />;
}

function Control(props) {
  return (
    <TextField
      fullWidth
      InputProps={{
        inputComponent,
        inputProps: {
          className: props.selectProps.classes.input,
          inputRef: props.innerRef,
          children: props.children,
          ...props.innerProps,
        },
      }}
      {...props.selectProps.textFieldProps}
    />
  );
}

function Option(props) {
  return (
    <MenuItem
      buttonRef={props.innerRef}
      selected={props.isFocused}
      component="div"
      style={{
        fontWeight: props.isSelected ? 500 : 400,
      }}
      {...props.innerProps}
    >
      {props.children}
    </MenuItem>
  );
}

function Placeholder(props) {
  return (
    <Typography
      color="textSecondary"
      className={props.selectProps.classes.placeholder}
      {...props.innerProps}
    >
      {props.children}
    </Typography>
  );
}

function SingleValue(props) {
  return (
    <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
      {props.children}
    </Typography>
  );
}

function ValueContainer(props) {
  return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
}

function MultiValue(props) {
  return (
    <Chip
      tabIndex={-1}
      label={props.children}
      className={classNames(props.selectProps.classes.chip, {
        [props.selectProps.classes.chipFocused]: props.isFocused,
      })}
      onDelete={props.removeProps.onClick}
      deleteIcon={<CancelIcon {...props.removeProps} />}
    />
  );
}

function Menu(props) {
  return (
    <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
      {props.children}
    </Paper>
  );
}

const components = {
  Control,
  Menu,
  MultiValue,
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer,
};

class AutocompleteSelect extends React.Component {
  render() {
    const { classes, theme, options, value, handleChange, placeholder, isClearable, isMulti } = this.props;

    const selectStyles = {
      input: base => ({
        ...base,
        color: theme.palette.text.primary,
        '& input': {
          font: 'inherit',
        },
      }),
    };

    return (
      <NoSsr>
        <Select
          classes={classes}
          styles={selectStyles}
          options={options}
          components={components}
          value={value}
          onChange={(event) => handleChange(event.value)}
          placeholder={placeholder}
          isClearable={isClearable}
          isMulti={isMulti}
        />
      </NoSsr>
    );
  }
}

AutocompleteSelect.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
  handleChange: PropTypes.func.isRequired,
  options: PropTypes.array.isRequired,
};

AutocompleteSelect.defaultProps = {
  isClearable: false,
  isMulti: false,
  placeholder: '',
  value: undefined,
};

export default withStyles(styles, { withTheme: true })(AutocompleteSelect);

Я вижу в консоли браузера, что я получаю value для поля select и что state в родительском компоненте корректно обновляет событие onChange, но значение поля не оказаны. Что я тут не так делаю?

...