React - click事件會立即觸發所有兄弟姐妹

Question

我怎么能讓每個接收onClick事件的<li />一次只能單獨觸發一個 ？

我的目的是根據點擊事件更改顏色並顯示/隱藏內容。 它可以工作，但是當點擊給定的<li/> ，它的所有兄弟姐妹也同時被解雇了。

我怎么能阻止這個？

這是沙箱代碼

function App() {
  return (
    <div className="App">
      <Market />
    </div>
  );
}

class Market extends Component {
  constructor() {
    super();
    this.state = {
      isColor: false,
      isShow: false,
      fruits: ["Apple", "Banana", "Peach"]
    };
  }

  handleToggle = () => {
    this.setState(currentState => ({
      isColor: !currentState.isColor,
      isShow: !currentState.isShow
    }));
  };

  render() {
    const fruits = this.state.fruits.map((item, i) => (
      <li
        key={i}
        className={this.state.isColor ? "blue" : "red"}
        onClick={this.handleToggle}
      >
        {item}
        <span className={this.state.isShow ? "show" : "hide"}>Show Text</span>
      </li>
    ));
    return <ul>{fruits}</ul>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

你的<li>並非全部開火。 所有元素都在檢查狀態，以查看顏色和可見是否為真。 所以你有一個狀態，對於三個元素，當一個是真的時，它們都是真的。

您要么為每個水果制作一個狀態的對象，要么更好的是，為每個具有自己狀態的列表項創建一個新組件，並通過prop傳遞水果名稱。

我已經分叉了你的沙箱，並創建了一個快速示例 ，看看它是什么樣的。 這是將事物分解為可重用模塊的核心反應概念，並且在可能的情況下讓組件管理自己的狀態。 從長遠來看，真的會讓你真正理解這個想法，所以我希望這會有所幫助。

Answer 2

所有單擊處理程序不會同時觸發，但您保留一個變量以指示是否顯示所有單擊處理程序。

您可以將對象保持在您保持鍵值對的狀態，指示是否顯示某個項目。

例

 class Market extends React.Component { state = { fruits: ["Apple", "Banana", "Peach"], isShown: {} }; handleToggle = item => { this.setState(currentState => ({ isShown: { ...currentState.isShown, [item]: !currentState.isShown[item] } })); }; render() { return ( <ul> {this.state.fruits.map((item, i) => ( <li key={i} style={{ backgroundColor: this.state.isShown[item] ? "blue" : "red" }} onClick={() => this.handleToggle(item)} > {item} <span style={{ display: this.state.isShown[item] ? "inline-block" : "none" }} > Show Text </span> </li> ))} </ul> ); } } ReactDOM.render(<Market />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 3

這是@SpeedOfRound建議的方法的工作沙箱。 為每個li創建一個獨立的組件，以便元素具有自己的狀態。 我不知道這種方法與@Tholle的答案相比是有效的。

SandBox [ https://codesandbox.io/s/1vyonx0zrl ]