1-5 组件通讯

1-使用状态操作表单元素的值

知识点：

代码：

import { useState } from "react";

import "./App.scss";

const App = () => {

  const [value, setValue] = useState("");

  const [checked, setChecked] = useState(false);

  return (

    <div>

      <input value={value} onChange={(e) => setValue(e.target.value)}></input>

      <button onClick={() => alert(value)}>获取</button>

      <button onClick={() => setValue("111")}>修改</button>

      <input

        type="checkbox"

        checked={checked}

        onChange={(e) => setChecked(e.target.checked)}

      ></input>

      {checked ? "选中了" : "未选中"}

    </div>

  );

};

export default App;

2-useRef与DOM操作

知识点：

代码：

import { useRef, useState } from "react";

import "./App.scss";

const App = () => {

  const inputRef = useRef(null);

  return (

    <div>

      <input ref={inputRef}></input>

      <hr></hr>

      <button onClick={() => console.log(inputRef.current.value)}>

        获取文本框的值

      </button>

      <button onClick={() => inputRef.current.focus()}>获取焦点</button>

    </div>

  );

};

export default App;

3、组件的props

知识点：

代码：

import "./App.scss";

// 头像组件

// 通过函数的参数接收props

// const Avatar = (props) => {

//   console.log(props);

//   return (

//     <div>

//       <img src={props.imgUrl} alt="" width={props.size}></img>

//     </div>

//   );

// };

//推荐： 使用解构来简化props的使用

// size=50 用来给size设置默认值

const Avatar = ({ imgUrl, size = 50 }) => {

  return (

    <div>

      <img src={imgUrl} alt="" width={size}></img>

    </div>

  );

};

const App = () => {

  return (

    <div>

      {/* 头像组件 */}

      {/* 1、给组件传递props */}

      {/* 如果给组件传递非字符串，需要用{}来传递 */}

      <Avatar

        size={100}

        imgUrl="https://preview.qiantucdn.com/58pic/11/00/02/56h58PICcffrQrg9e9Ccv_PIC2018.png!w580_772_nowater"

      ></Avatar>

      <Avatar imgUrl="https://preview.qiantucdn.com/58pic/11/00/02/56h58PICcffrQrg9e9Ccv_PIC2018.png!w580_772_nowater"></Avatar>

    </div>

  );

};

export default App;

4、组件通讯-1父子组件通讯

知识点：

代码：

app.js:

import { useState } from "react";

import "./App.scss";

import classNames from "classnames";

// 父子组件通讯

// 子组件

const Todo = ({ id, text, done, onToggle }) => {

  console.log(onToggle);

  return (

    <div className={classNames("todo", done && "todo-done")}>

      <div onClick={() => onToggle(id)}>{text}</div>

      <button>X</button>

    </div>

  );

};

// 任务列表数据

const defaultTodos = [

  { id: 1, text: "学习react", done: false },

  { id: 2, text: "休息", done: true },

  { id: 3, text: "吃饭", done: false },

];

// 父组件

const App = () => {

  const [todos, setTodos] = useState(defaultTodos);

  const onToggle = (id) => {

    // console.log(id);

    setTodos(

      todos.map((item) => {

        if (item.id === id) {

          return {

            ...item,

            done: !item.done,

          };

        }

        return item;

      })

    );

  };

  return (

    <div className="app">

      <h3>任务待办列表：</h3>

      {todos.map((item) => {

        return <Todo key={item.id} {...item} onToggle={onToggle}></Todo>;

        // return (

        //   <Todo

        //     key={item.id}

        //     id={item.id}

        //     text={item.text}

        //     done={item.done}

        //     onToggle={onToggle}

        //   ></Todo>

        // );

      })}

    </div>

  );

};

export default App;

app.scss:

.app {

  width: 80%;

}

.todo {

  display: flex;

  padding: 10px;

  margin-bottom: 15px;

  background-color: skyblue;

  cursor: pointer;

  div {

    flex: 1;

  }

}

.todo-done {

  div {

    color: #fff;

    text-decoration: line-through;

  }

}

5、非父子组件通讯-1兄弟组件通讯

知识点：