「我的学习笔记」React基础day03（基于黑马程序员资料包整理）

React表单控制

受控绑定

概念：使用React组件的状态（useState）控制表单的状态
1、React（state）->state绑定到input的value属性
2、把input最新的value值设置给state

function App(){
    
    
  const [value, setValue] = useState('')
  return (
    <input 
      type="text" 
      value={
    
    value} 
      onChange={
    
    (e) => setValue(e.target.value)}
    />
  )
}

输入框的abc的值传入了state中

非受控绑定

概念：通过获取DOM的方式获取表单的输入数据

function App(){
    
    
  const inputRef = useRef(null)//创建ref对象

  const onChange = ()=>{
    
    
    console.log(inputRef.current.value)//拿到DOM对象
  }
  
  return (
    <input 
      type="text" 
      ref={
    
    inputRef}
      onChange={
    
    onChange}
    />//绑定ref
  )
}

案例-B站评论案例

需求：

手机输入框评论内容，并发布评论
id处理和时间处理（uuid 和 day.js）

创建评论的useState

const [content,setcontent] = useState('')

将文本框的内容传入content中

<textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
              ref={
    
    inputRaf}
              value={
    
    content}
              onChange={
    
    (e)=> setcontent(e.target.value)}
            />

给发布按钮绑定事件

<div className="send-text" onClick={
    
    handlePublish}>发布</div>

声明回调函数

const [content,setcontent] = useState('')
  const inputRaf = useState(null)
  const handlePublish = ()=>{
    
    
    setCommentlist([
      ...commentList,
      {
    
    
        rpid:uuidV4(),
        user:{
    
    
          uid:'30009257',
          avatar,
          uname:'黑马前端'
        },
        content:content,
        ctime:dayjs(new Date()).format('MM-DD hh:mm'),
        like:128

      }
    ])
  }

id和时间的处理

需求

1.roid要求一个唯一的随机id——引入uuid
2.ctime要求以当前的时间为准，生成固定格式——引入dayjs

引入uuid

终端下载uuid

npm install uuid

调用uuid的包

import {
    
    v4 as uuidV4} from 'uuid'

调用方法

uuidV4()

引入dayjs

终端下载dayjs

npm install dayjs

调用dayjs的包

import dayjs from 'dayjs'

调用方法传入当前时间

dayjs(new Date()).format('MM-DD hh:mm'),

清空内容并聚焦

清空内容

	setcontent('')//清空内容

生成钩子函数

const inputRaf = useState(null)

绑定到文本框中

ref={
    
    inputRaf}

重新聚焦

inputRaf.current.focus()

React组件通信

概念：组件通信就是组件之间的数据传递, 根据组件嵌套关系的不同，有不同的通信手段和方法,今天学习了两种通信方式。

A-B 父子通信
B-C 兄弟通信

父子通信-父传子

基础实现

**实现步骤 **

父组件传递数据 - 在子组件标签上绑定属性
子组件接收数据 - 子组件通过props参数接收数据

function Son(props){
    
    
  return <div>{
    
     props.name }</div>
}


function App(){
    
    
  const name = 'this is app name'
  return (
    <div>
       <Son name={
    
    name}/>
    </div>
  )
}

props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX

props是只读对象
子组件只能读取props中的数据(通过props.属性名调用)，不能直接进行修改, 父组件的数据只能由父组件修改

特殊的prop-chilren

场景：当我们把内容嵌套在组件的标签内部时，组件会自动在名为children的prop属性中接收该内容, 例如下方的span就会自动变成children。

<son>
	<span>this is span</span>
</son>

父子通信-子传父

核心思路：在子组件中调用父组件中的函数并传递参数

function Son({
     
      onGetMsg }){
    
    
  const sonMsg = 'this is son msg'
  return (
    <div>
      {
    
    /* 在子组件中执行父组件传递过来的函数 */}
      <button onClick={
    
    ()=>onGetMsg(sonMsg)}>send</button>
    </div>
  )
}


function App(){
    
    
  const getMsg = (msg)=>console.log(msg)
  
  return (
    <div>
      {
    
    /* 传递父组件中的函数到子组件 */}
       <Son onGetMsg={
    
     getMsg }/>
    </div>
  )
}