Обработка изменения состояния в React

Question

Я все еще новичок, чтобы реагировать, и мне нужно создать это меню значков Моя проблема в том, что мой handleChange сейчас не работает. У меня есть значок Меню, я вижу меню возможных значений, но не могу выбрать ни одного из них. Может ли кто-нибудь объяснить лучший способ заставить этот код работать? Я использую компонент Icon Menu "https://v0.material -ui.com / # / components / icon-menu ". Спасибо

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

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

    this.state = {
      values: [],
    };
  }

  handleChange(event, index, values) {
    this.setState({ values });
  }

  render() {
    const { possibleValues, title } = this.props;
    return (
      <SelectField
        autoWidth
        floatingLabelText={title}
        multiple={false}
        value={possibleValues}
        onChange={this.handleChange.bind(this)}
      >
        {Object.keys(possibleValues).map(possibleValue => (
          <MenuItem
            key={possibleValue}
            value={possibleValue}
            primaryText={possibleValues[possibleValue]}
          />
          ))}
      </SelectField>
    );
  }
}

MatchPintOwnerFilter.propTypes = {
  title: PropTypes.string,
  possibleValues: PropTypes.shape(),
  newValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

MatchPintOwnerFilter.defaultProps = {
  title: 'Frequency',
  possibleValues: {
    0: 'status 0',
    1: 'status 1',
    2: 'status 2',
    3: 'status 3',
    4: 'status 4',
    5: 'status 5',
  },
  newValue: '1',
};
export default MatchPintOwnerFilter;

Answer 1

Вы не устанавливаете SelectField значение реквизит правильно:

const { possibleValues } = this.props;
< SelectField
autoWidth
floatingLabelText = {
  title
}
multiple = {
  false
}
value = {
  possibleValues
}
onChange = {
    this.handleChange.bind(this)
  } >

То, что вы пытаетесь сделать, это управлять SelectionField, передавая реквизит с именем возможных значений, который никогда не изменяется.Если вы хотите создать управляемый компонент, вы должны поднять State Up , а затем снова передать его вашему компоненту в качестве проп.

handleChange(event, index, value) {
   this.props.onSelectionFieldChange(value);
}

В родительском компоненте у вас должно быть что-то вроде:

_onSelectionFieldChange(possibleValues) {
   this.setState({ possibleValues });
}

<MatchPintOwnerFilter onSelectionFieldChange={this._onSelectionFieldChange.bind(this)} possibleValues={this.state.possibleValues}>

Надеюсь, это помогло.

Answer 2

Проблема в том, что вам нужно передать значение в значение prop SelectField, но не возможные значения и никогда не выполнять привязку непосредственно при рендере, а делать это в конструкторе Сохраняйте свой номер состояния значения, но не массив

Проверьте ниже исправленный код

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

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

    this.state = {
      value: 1,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event, index, value) {
    this.setState({ value });
  }

  render() {
    const { possibleValues, title, value } = this.props;
    return (
      <SelectField
        autoWidth
        floatingLabelText={title}
        multiple={false}
        value={value}
        onChange={this.handleChange}
      >
        {Object.keys(possibleValues).map(possibleValue => (
          <MenuItem
            key={possibleValue}
            value={possibleValue}
            primaryText={possibleValues[possibleValue]}
          />
          ))}
      </SelectField>
    );
  }
}

MatchPintOwnerFilter.propTypes = {
  title: PropTypes.string,
  possibleValues: PropTypes.shape(),
  newValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

MatchPintOwnerFilter.defaultProps = {
  title: 'Frequency',
  possibleValues: {
    0: 'status 0',
    1: 'status 1',
    2: 'status 2',
    3: 'status 3',
    4: 'status 4',
    5: 'status 5',
  },
  newValue: '1',
};
export default MatchPintOwnerFilter;