在状态为react的数组索引处更改样式对象

Question

我正在尝试使用toggleSelected（）在另一个组件中单击某个选项时，在我的应用程序状态内的我的options数组中更新一个样式对象。有谁知道如何最好地访问对象并将背景色设置为其他颜色？

App.js

this.state = {
    options: [
      {
        id: 0,
        label: "Industrial Truck and Tractor Operators",
        value: "53-7051",
        style: {
          display: "flex",
          margin: "auto",
          paddingTop: "1em",
          paddingBottom: "1em",
          paddingLeft: "1em",
          borderBottom: "solid",
          borderColor: "black",
          borderWidth: ".1em",
          color: "#64bd9a",
          backgroundColor: "white"
        },
        tooltip_text:
          'Operate industrial trucks or tractors equipped to move materials around a warehouse, storage yard, factory, construction site, or similar location. Excludes “Logging Equipment Operators" (45-4022).'
      },
      {
        id: 1,
        label: "Order Clerks",
        value: "43-4151",
        style: {
          display: "flex",
          margin: "auto",
          paddingTop: "1em",
          paddingBottom: "1em",
          paddingLeft: "1em",
          borderBottom: "solid",
          borderColor: "black",
          borderWidth: ".1em",
          color: "#64bd9a",
          backgroundColor: "white"
        },
        tooltip_text:
          'Receive and process incoming orders for materials, merchandise, classified ads, or services such as repairs, installations, or rental of facilities. Generally receives orders via mail, phone, fax, or other electronic means. Duties include informing customers of receipt, prices, shipping dates, and delays; preparing contracts; and handling complaints. Excludes "Dispatchers, Except Police, Fire, and Ambulance" (43-5032) who both dispatch and take orders for services.'
      }
    ],
    value: null,
    styles: {
      //container style is working
      marginTop: "2em",
      marginLeft: "2em",
      borderStyle: "solid",
      borderWidth: ".1em",
      borderBottom: "none",
      borderRight: "solid",
      width: "19em",
      textAlign: "justify",
      backgroundColor: "white",
      boxShadow: "3px 6px 5px #9E9E9E"
    },
    className: "",
    selectedClassName: "",
    loading_State: true, //this changes to false when the component loads
    childrenCount: 0
  };

  toggleSelected = child => {
    this.setProps({options.indexOf('1').style.backgroundColor: "gray" })
  };

Component.js

render() {
    return (
      <div style={this.props.styles}>
        {this.props.options.map(option => (
          <div
            key={option}
            id={"option" + option.id}
            style={option.style}
            onClick={e => {
              if (this.props.setProps) {
                this.props.setProps({ value: e.target.value });
              } else {
                this.setState({ value: e.target.value });
              }
              this.props.toggleSelected(option.id); //passing my index here to the function
            }}
          >
            <span id={option.id}> {option.label} </span>
            <UncontrolledTooltip
              placement="right"
              target={"option" + option.id}
            >
              {option.tooltip_text}
            </UncontrolledTooltip>
          </div>
        ))}
      </div>
    );
  }

在更新样式对象方面，我是按照正确的方式来做的。我应该使用其他方法吗？我也想在不使用CSS的情况下执行此操作，因此添加classNames不是我想要的。

Answer 1

[我相信下面的方法应该起作用，假设这里的childIndex表示要修改的state.options数组的索引。

toggleSelected = (childIndex) => {
  const newOptions = this.state.options.map((option, i) => {
    if (i !== childIndex) {
      return option;
    }
    return {
      ...option,
      style: {
        ...option.style,
        backgroundColor: "green" // your color here
      }
    }
  });

  this.setState({ options: newOptions });
}

编辑：如果需要将所有其他颜色更改为白色，则可以执行以下操作：

toggleSelected = (childIndex) => {
  const newOptions = this.state.options.map((option, i) => {
    return {
      ...option,
      style: {
        ...option.style,
        backgroundColor: i === childIndex ? "green" : "white"
      }
    }
  });

  this.setState({ options: newOptions });
}