Question

我有2个对象数组，一个是预加载列表，一个是所选项。我的问题是无法在复选框上选中所选项目。

class HelloWidget extends React.Component {
    constructor(props) {
      super(props);
      this.list = [{
        "id": "exhibitions",
        "name": "Exhibitions"
      }, {
        "id": "festivals_n_concerts",
        "name": "Festivals & Concerts"
      }, {
        "id": "grand_opening",
        "name": "Grand Opening"
      }, {
        "id": "meeting",
        "name": "Meeting"
      }, {
        "id": "party",
        "name": "Party"
      }, {
        "id": "product_launches",
        "name": "Product Luanches"
      }, {
        "id": "roadshows",
        "name": "Roadshows"
      }, {
        "id": "sporting_events",
        "name": "Sporting Events"
      }, {
        "id": "trade_show",
        "name": "Trade Show"
      }]

      this.selectedList = [{
        "id": "grand_opening",
        "name": "Grand Opening",
        "space_event_id": "grand_opening"
      }, {
        "id": "trade_show",
        "name": "Trade Show",
        "space_event_id": "trade_show"
      }]
    }

    render() {
        return (<div>
        {this.list.map(obj => <div><br /><input 
        key={obj.name}
        checked={this.selectedList.findIndex(o => o.id === obj.id)}
        type="checkbox" >{obj.name}</input></div>)}
        </div>
        )
        }
}

我认为这一行是错误的

checked={this.selectedList.findIndex(o => o.id === obj.id)}

基于输出结果。任何线索如何使用findIndex？

Answer 1

由于'checked'prop仅适用于布尔值和findIndex返回数字，您可以修改如下：

checked={this.selectedList.findIndex(o => o.id === obj.id) !== -1}

使用findIndex es6映射2对象数组

1 个答案: