时间戳

首页 > 解决方案 > ReactJS：如何设置通过单选按钮选择的对象的状态？

reactjs - ReactJS：如何设置通过单选按钮选择的对象的状态？

问题描述

在我的UsedComponents组件中，我有一个映射的单选按钮列表，每个按钮都componentType作为值返回。

this.props.usedComponents.map((component, index) => (
  <RadioButton
    key={index}
    id={component.componentType}
    icon={ButtonIco}
    label={component.componentName}
    name="select"
    value={component.componentType}
    inputClass={classes.RadioInput}
    labelClass={classes.RadioLabel}
    selected={component.selected}
    handleChange={this.props.selectComponent}
  />
))

我的状态如下所示：

constructor(props) {
  super(props);
  this.state = {
    components: components,
    usedComponents: [components[0], components[2], components[3]],
  };
  this.selectComponentHandler = this.selectComponentHandler.bind(this);
}

components是一个导入的对象数组，每个对象看起来像这样：

{
  componentType: "headerLogoNavigation",
  componentName: "Header 02",
  padding: "small",
  fontSize: "small",
  fontColor: "#1f1f1f",
  fontFamily: "Sans-serif",
  backgroundColor: "#ffffff",
  image: placeholderLogo,
  selected: false,
  isEditing: false,
  margins: false,
  roundCorners: "none",
  mobile: "false"
}

在我的Page组件中，我试图将一个selectComponentHandlerprop 传递给我的UsedComponents组件，该组件应根据所选单选按钮的值选择一个组件并将其状态设置为selected: true. 为了获得额外的好处，它应该将任何先前选择的组件的状态设置为selected: false.
到目前为止，我设法弄清楚如何选择组件，但我无法更新它的状态。在我放弃之前创建此处理程序的最后一次尝试如下所示：

selectComponentHandler = event => {
  this.setState(prevState => {
    let selected = prevState.usedComponents.filter(item => item.componentType === event.target.value);
    selected.selected = 'true';  
    return { selected };
  });
};

它试图过滤单选按钮匹配的prevState内部并设置它的状态，但我搞砸了逻辑或语法，我的头快要爆炸了，所以我不知道我做错了什么。有人可以帮我解决这个问题吗？setStatecomponentTypeevent.target.value

标签： reactjsradio-button

解决方案

我想到了。这有点hacky，但它有效。

selectComponentHandler = event => {
  const value = event.target.value;
  this.setState(prevState => {
    let selected = prevState.usedComponents.filter(item => item.componentType === value).shift();
    let unSelected = prevState.usedComponents.filter(item => item.selected === true).shift();
    if(unSelected) {
      unSelected.selected = false;
    }
    selected.selected = true;  
    return { unSelected, selected };
  });
};

推荐阅读