Question

我仍然是新手，因此必须创建此图标菜单。我的问题是我的handleChange现在无法正常工作。我有菜单图标，可以看到possibleValues菜单，但是我无法选择其中任何一个。有人可以解释使此代码正常工作的最佳方法吗？我正在使用图标菜单组件“ 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的值prop，但不能传递值，并且永远不要直接在render中绑定，而要在构造函数中进行绑定保留您的值状态号，但不要保留数组

检查以下更正的代码

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;

Answer 2

您没有正确设置SelectField 值道具：

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

您想要做的是通过传递一个永不改变的名为possibleValues的道具来控制SelectionField。如果要创建受控组件，则应提起向上状态，然后将其作为道具再次传递给您的组件。

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

在父组件中，您应该有类似以下内容：

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

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

希望有帮助。

处理React中的状态变化

2 个答案: