JSFiddle示例-React，無法更新渲染

Question

我有一個正在開發的JSFiddle示例，但無法使其工作100％。

https://jsfiddle.net/richardmarais/kz0mLnge/13/

如您所見，它呈現了一些色塊。

例

當我單擊其中一項時，將正確調用onClick事件。

  render() {
    return (
      <Fragment>
        <ul>
          <li>{this.state.items.filter(i => i.isSelected).map(i => i.name).join(', ')}</li>
        </ul>
        <ul className="Colors">
          {this.state.items.map(item => (
            <li key={item.name} name={item.name} className={`Colors__item Colors__item--${item.color} ` + (item.isSelected ? 'Colors__item--state-selected' : '')} onClick={this.onClick}>
              {item.name}
            </li>
          ))}
        </ul>
      </Fragment>
           );
  }

項目列表已正確更新（即isSelected: true ）。

{name: "colour blue", color: "blue", isSelected: true}

問題

DOM沒有更新以反映onClick 。

• 所選項目的樣式應更改為Colors__item--state-selected 。
• 所選的item.name應該寫在Fragment的頂部。

附加問題

onClick函數從事件（ e.target.textContent ）獲取item.name 。 有沒有一種方法可以將item.name作為參數傳遞給onClick調用？

Answer 1

不要直接分配state ，這是您的問題。 您必須使用方法this.setState() 。 此處的更多信息： https : //reactjs.org/docs/state-and-lifecycle.html#using-state-正確地

還有其他問題-您可以通過兩種方式處理

• （簡單但不完美，這將在每次渲染時創建匿名函數）-只需傳遞給onClick函數，如下所示： oClick={(event) => this.onClick(event, item.name)}和您的this.onClick方法處理多余的name參數或
• （推薦）創建新的<Item>組件並傳遞所有參數<Item object={item}> 。 在這個新的Item組件內部，您可以只擁有onClick方法並在其中使用this.props.object參數。

Answer 2

您的狀態沒有更新，您需要像這樣使用setState ，

toggleItemSelectedState (name) {
    console.log(name);
    this.setState({
      items: this.state.items.map(i => {
        return name === i.name ?
          { ...i, isSelected: !i.isSelected } :
          i
      })
    })
  }

關於其他問題，

您可以像這樣直接發送item.name ，

onClick={()=>this.onClick(item.name)}

函數應該是

onClick = (name) => {
    this.toggleItemSelectedState(name);
    console.log(this.state.items[0]);
}

演示

Answer 3

@pako是正確的。 您需要使用setState()更新狀態以使DOM重新呈現。

至於您的其他問題，您可以使用onClick = {()=>this.onClick(item.name)}將其直接傳遞給onClick調用。