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

【问题标题】：ReactJS: How to set state of an object selected via radio button?ReactJS：如何设置通过单选按钮选择的对象的状态？
【发布时间】：2019-11-07 01:52:35
【问题描述】：

在我的 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 };
  });
};

这是一种尝试在setState 中过滤componentType 中与单选按钮的event.target.value 匹配的prevState 并设置它的状态，但我搞砸了逻辑或语法，我的头脑是即将爆炸，所以我无法弄清楚我做错了什么。有人可以帮我解决这个问题吗？

【问题讨论】：

这是您正在寻找的答案吗？ Radio button selection to change state
谢谢，但事实并非如此。我的单选按钮将 componentType 作为值返回，我需要过滤状态内的对象以找到与该值匹配的对象，并将其状态更新为 selected: true。
您可以在单选按钮上附加一个 onChange 处理程序。 handleChange = (e, { value }) => this.setState({ value })
单选按钮值返回类似于“headerLogoNavigation”的内容。我需要过滤 state 中的 usedComponents 数组，以查找具有匹配的 componentType 的对象，例如“headerLogoNavigation”。每个对象还包含“selected: false”，这是我需要更新为 true。

标签： reactjs radio-button

【解决方案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 };
  });
};

【讨论】：

我认为 setState 应该保持尽可能干净。您可以将 setState 中编写的逻辑移到其他函数中。