处理 React 中的状态变化答案

【问题标题】：Handle State change in React处理 React 中的状态变化
【发布时间】：2019-02-21 03:22:45
【问题描述】：

我还是新手，我必须创建这个图标菜单。我的问题是我的 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;

【问题讨论】：

在您共享的代码的 sn-p 中，您使用的是 SelectField。

标签： javascript reactjs material-ui

【解决方案1】：

问题是您需要将值传递给 SelectField 的 value 属性，但不是 possibleValues 并且永远不要直接在渲染中进行绑定，而是在构造函数中进行绑定保留您的值状态编号，而不是数组

检查下面更正的代码

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;

【讨论】：

【解决方案2】：

您没有正确设置 SelectField value 属性：

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

您要做的是通过传递一个永远不会改变的名为 possibleValues 的道具来控制 SelectionField。如果你想创建一个受控组件，你应该提升 State Up，然后将它作为 prop 再次传递给你的组件。

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

在你的父组件中你应该有这样的东西：

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

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

希望对您有所帮助。

【讨论】：