1-3 组件和组件状态

1、React事件绑定

代码：

const handleClick = (e) => {

  e.preventDefault();

  alert("跳转到百度页面");

};

root.render(

  <div>

    {/* 1、时间绑定 */}

    <div

      className="box"

      onClick={() => {

        alert("你好");

      }}

    ></div>

    {/* 2、事件对象 */}

    {/* <a

      href="https://www.baidu.com"

      onClick={(e) => {

        e.preventDefault();

        alert("跳转到百度页面");

      }}

    >

      百度

    </a> */}

    {/* 3、使用单独创建的事件处理程序函数 */}

    <a href="https://www.baidu.com" onClick={handleClick}>

      百度

    </a>

  </div>

);

2、React组件

3、组件的状态

代码：

// 组件的状态

const App = () => {

  const [count, setCount] = useState(10);

  return (

    <div>

      <h1>计数器：{count}</h1>

      <button onClick={() => setCount(count + 1)}>+1</button>

    </div>

  );

};

export default App;

4、修改状态的规则

代码：

const App = () => {

  const [count, setCount] = useState(10);

  const [list, setList] = useState(["app", "orange"]);

  const [user, setUser] = useState({ name: "zs", age: 18 });

  return (

    <div>

      <h1>简单类型：{count}</h1>

      <button onClick={() => setCount(count + 1)}>修改</button>

      <hr></hr>

      <h1>复杂类型-数组</h1>

      <div>{list.join(",")}</div>

      <button

        onClick={() => {

          setList([...list, "ccc"]);

        }}

      >

        添加

      </button>

      <button

        onClick={() => {

          setList(list.filter((item) => item !== "orange"));

        }}

      >

        删除

      </button>

      <button

        onClick={() => {

          setList(

            list.map((item) => {

              if (item == "app") {

                return "苹果";

              }

              return item;

            })

          );

        }}

      >

        修改

      </button>

      <hr></hr>

      <h1>复杂类型-对象</h1>

      <div>

        姓名：{user.name}年龄:{user.age}

      </div>

      <button onClick={() => setUser({ ...user, name: "ls" })}>修改</button>

    </div>

  );

};

export default App;