React—04—状态管理-JZTXT

有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。

这被称为“状态提升”，这是编写 React 代码时常做的事。

事件一般以onXXX开头，比如内置元素div的click事件可以叫onClick，内置元素input的onChange。自定义组件的事件那可以随便取名字了，但是建议也onXXX开头。

事件处理函数一般以handleXXX开头

我看到这个需求，第一反应也是，加一个事件处理函数handleClick，然后再函数里找到dom，手动修改classname名字。

但是这类似于命令行方式的修改，是一条命令一条命令的，不是react所提倡的状态式修改。

于是我就相当，通过不同的状态控制不同的变量，然后把变量绑定到className上。

import { useState } from 'react';
export default function Picture() {
  const [status,setStatus] = useState(true);
  const [outName,setOutName] = useState("background background--active")
  function handleClick(){
    setStatus(!status);
    if(!status)  setOutName('background picture--active')
    if(status) setOutName("background background--active")
  }
  return (
    <div className={outName}>
      <img
        className="picture"
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
        onClick={handleClick}
      />
    </div>
  );
}