javascript - React - 单击事件立即触发所有同级

Question

我怎样才能拥有每个 <li />收到 onClick事件仅一次一个单独触发？

我的目的是根据点击事件更改颜色并显示/隐藏内容。它有效，但是单击给定的 <li/> 后所有其 sibling 也同时被解雇。

我怎样才能防止这种情况发生？

here's sandbox code

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 传递水果名称。

我已经 fork 了你的沙箱并创建了一个快速 example这看起来像什么。这是一个核心 React 概念，即将事物分解为可重用的模块，并在可能的情况下让组件管理自己的状态。从长远来看，现在真正把这个想法记下来确实对你有好处，所以我希望这会有所帮助。