React - click事件会立即触发所有兄弟姐妹

Question

我怎么能让每个<li />接收onClick事件的人一次只能一个人开火？

我的目的是根据点击事件更改颜色并显示/隐藏内容.它可以工作,但是当点击给定的<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传递水果名称.

我已经分叉了你的沙箱,并创建了一个快速示例,看看它是什么样的.这是将事物分解为可重用模块的核心反应概念,并且在可能的情况下让组件管理自己的状态.从长远来看,真的会让你真正理解这个想法,所以我希望这会有所帮助.