當在 React 中單擊一個孩子時，我應該如何 go 關於更改兄弟姐妹的 state？

Question

我是 React 的新手，我剛剛遇到了一個問題，我需要 select 數組中的單個組件，但是當我 select 那個子組件時，我希望它改變兄弟組件的狀態/樣式。

所以假設我在一個數組中有 3 個子組件。 我怎樣才能 select 一個項目並將其設置為看起來被選中，然后取消選擇/取消所有其他兄弟姐妹的樣式？

我在這里有一個示例項目：https://codesandbox.io/s/summer-river-h20cx?file=/src/Parent.js我希望一次只有一個子項為綠色，選中時。

謝謝！

Answer 1

在我看來，從父組件控制selected道具並將onClick傳遞給子組件並將子組件用作展示組件會更有效。

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedId: 1,
      childArray: [
        {
          id: 1,
          Name: "Child 1"
        },
        {
          id: 2,
          Name: "Child 2"
        },
        {
          id: 3,
          Name: "Child 3"
        }
      ]
    };
    this.handleClickChild = this.handleClickChild.bind(this);
  }

  handleClickChild(id) {
    this.setState({ selectedId: id });
  }

  render() {
    var childObjects = this.state.childArray.map(item => (
      <Child
        text={item.Name}
        selected={item.id === this.state.selectedId}
        onClick={() => this.handleClickChild(item.id)}
      />
    ));

    return <div className="parent">{childObjects}</div>;
  }
}

你可以看到我根據你的https://codesandbox.io/s/crazy-haze-vy75f?file=/src/Parent.js制作的這個代碼框

Answer 2

嘗試將 state 向上提升：將 state 移動到父組件並讓它控制它，而子組件是無狀態的。