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

Question

在我的

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

组件中，我尝试将

selectComponentHandler

属性传递给我的

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

内的

setState

以获得与单选按钮的

componentType

匹配的

event.target.value

并设置其状态，但我搞乱了逻辑或语法。我怎样才能知道我做错了什么？

Answer 1

我想通了。虽然有点 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 };
  });
};