1-3 组件和组件状态

1、React事件绑定

代码：

const handleClick = (e) => {

  e.preventDefault();

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

};

root.render(

 

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

   

      className="box"

      onClick={() => {

        alert("你好");

      }}

    >

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

    {/*

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

      onClick={(e) => {

        e.preventDefault();

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

      }}

    >

      百度

    */}

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

   

      百度

   

 

);

2、React组件

3、组件的状态

代码：

// 组件的状态

const App = () => {

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

  return (

   

     

计数器：{count}

      setCount(count + 1)}>+1

   

  );

};

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 (

   

     

简单类型：{count}

      setCount(count + 1)}>修改

     

---

     

复杂类型-数组

     

{list.join(",")}

     

        onClick={() => {

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

        }}

      >

        添加

     

     

        onClick={() => {

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

        }}

      >

        删除

     

     

        onClick={() => {

          setList(

            list.map((item) => {

              if (item == "app") {

                return "苹果";

              }

              return item;

            })

          );

        }}

      >

        修改

     

     

---

     

复杂类型-对象

     

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

     

      setUser({ ...user, name: "ls" })}>修改

   

  );

};

export default App;