处理 React 中的状态变化

Posted 2023-02-22

【中文标题】处理 React 中的状态变化

【英文标题】：Handle State change in 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。

【参考方案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>

希望对您有所帮助。