react学习day4

最新推荐文章于 2025-12-26 08:34:32 发布

原创最新推荐文章于 2025-12-26 08:34:32 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #前端

js技巧专栏收录该内容

33 篇文章

订阅专栏

本文展示了如何在React中使用useState和useRef进行状态管理和DOM操作，包括受控表单的实现，获取DOM元素以及创建一个可编辑的评论列表组件

1.受控表单，value和state绑定

import React, { useState } from 'react';
import './App.css'
function App() {
  const [value,setValue]=useState('')
  return (
    <div>
     <input value={value} onChange={(e)=>setValue(e.target.value)} type='text'></input>
    </div>
  );
}
export default App;

2.获取dom元素

import React, { useRef, useState } from 'react';
import './App.css'
function App() {
  const inputref=useRef(null)
  const getDom=()=>{
    console.log(inputref.current.value)
  }
  return (
    <div>
      <input type='text' ref={inputref}></input>
      <button onClick={getDom}>get dom</button>
    </div>
  );
}
export default App;

3.评论列表新增

import React, { useRef, useState } from 'react';
import './App.css'
function App() {
  const list=[
    {name:'test1',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:'very good'},
    {name:'test2',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:'ok'},
    {name:'test3',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:'very bad'},
  ]
  const [clist,setClist]=useState(list)
  const content={
    background:'gray',
    color:'white',
    margin:'10px 0',
    padding:'10px 0'
  }
  const name={
    background:'blue',
    color:'white',
    width:'50px'
  }
  const box={
    border:'1px solid',
    margin:'10px'
  }
  const use={id:1}
  const [use1]=useState(use)
  const deletebtn=(vv)=>{
    console.log(vv)
    setClist(clist.filter((v,i)=>i!=vv))
  }
  const tabs=[
    {type:'text',name:'news'},
    {type:'time',name:'time'},
  ]
  const [type,setType]=useState('text')
 const tabc=(type)=>{
  console.log(type)
  setType(type)
 }
 const active={
  color:'red'
 }
 const [intext,setIntest]=useState('')
 const inref=useRef(null)
 const addtext=()=>{
  // const newlist=clist.concat( {name:'test1',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:intext},)
  // setClist(newlist)
  // console.log(clist)
  setIntest('')
  setClist([
    ...clist,
    {name:'test1',img:'https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF',content:intext},
   ])
   inref.current&&inref.current.focus()
 }
  return (
    <div>
      <div>
        {tabs.map(v=><span  className={`${v.type===type&&'active'}`} onClick={()=>tabc(v.type)} key={v.type}>{v.name}</span>)}
      </div>
      <div>

        <input ref={inref} type='textarea' value={intext} onChange={(e)=>{setIntest(e.target.value)}}></input>
        <button onClick={addtext}>add</button>
      </div>
      {clist.map((v,i)=>(
        <div key={i} style={box}>
          <div className='img'>
            <img src={v.img} alt='img' style={{height:'20px',width:'20px',borderRadius:'50%'}}></img>
          </div>
          <div className='content' style={content}>
            {v.content}
          </div>
          <div className='name' style={name}>
            {v.name}
          </div>
          {use1.id==i && <span onClick={()=>deletebtn(i)}>delete</span>}
        </div>
      ))}
    </div>
  );
}
export default App;