react實(shí)現(xiàn)動(dòng)態(tài)表單
更新時(shí)間：2022年08月24日 08:36:00 作者：追逐驀然
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了react實(shí)現(xiàn)動(dòng)態(tài)表單的具體代碼，供大家參考，具體內(nèi)容如下
1.小要求
在工作中，我們也會(huì)碰到這樣子的需求：在填寫信息的時(shí)候，可以填寫多個(gè)人名、多個(gè)需求、以及動(dòng)態(tài)生產(chǎn)一個(gè)分組。
今天我們就以: 可以動(dòng)態(tài)的添加/刪除人名、路徑以及可以添加/刪除一個(gè)分組的需求來(lái)開(kāi)始今天的學(xué)習(xí)之旅。需求如下圖所示:
2.技術(shù)點(diǎn)分析
1.數(shù)據(jù)結(jié)構(gòu)
2.react+antd 動(dòng)態(tài)編輯表格數(shù)據(jù)提及的知識(shí)點(diǎn)
3.js操作數(shù)據(jù)的方法: 添加數(shù)據(jù)、根據(jù)下標(biāo)刪除數(shù)據(jù)
3.代碼分析
3.1 數(shù)據(jù)結(jié)構(gòu)分析
/**
*?? ?1. 最外面是一個(gè)數(shù)組
*?? ?2. 中間是一個(gè)字典，每個(gè)字典就是一個(gè)分組
*?? ?3. name表示人名，也是一個(gè)數(shù)組，這樣子我們就可以動(dòng)態(tài)的添加/刪除人名(path路徑，跟name同理)
**/
const [data, setData] = useState([
? ? ? ? {
? ? ? ? ? ? 'name': [''],
? ? ? ? ? ? 'path': ['']
? ? ? ? }
?])3.2添加人名分析
添加路徑和添加人名的代碼類似，就不重復(fù)編寫了，大家可以去看完整的代碼。這里也“添加人名”舉例子:
<Button type="dashed" width={200} onClick={() => {
??? ??? ?// 采用了[...xxx]性質(zhì)，在對(duì)應(yīng)分組中名字?jǐn)?shù)據(jù)中添加一個(gè)空的數(shù)據(jù)
? ? ? ?let obj = [...data]
? ? ? ?setData([])
? ? ? ?obj[index]['name'].push('')
? ? ? ?// 然后在更新數(shù)據(jù)
? ? ? ?setData(obj);
? ?}}>+添加人名</Button>3.3修改人名分析
修改路徑和修改人名的代碼類似，就不重復(fù)編寫了，大家可以去看完整的代碼。這里也“修改人名”舉例子:
<Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => {
?? ? ?// 采用了[...xxx]性質(zhì)，
? ? ? let obj = [...data]
? ? ? setData([])
? ? ? // 修改對(duì)應(yīng)的人名
? ? ? obj[index]['name'][nameIndex] = e.target.value
? ? ? // 然后在更新數(shù)據(jù)
? ? ? setData(obj)
? }} />3.4刪除人名分析
刪除路徑和刪除人名的代碼類似，就不重復(fù)編寫了，大家可以去看完整的代碼。這里也“刪除人名”舉例子:
<MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => {
?? ?// 采用了[...xxx]性質(zhì)，
? ? let obj = [...data]
? ? setData([])
? ? // 刪除人名，使用js的數(shù)組用法: 根據(jù)下標(biāo)刪除
? ? obj[index]['name'].splice(nameIndex, 1);
? ? setData(obj)
}} />3.5添加分組
<Button type="dashed" style={{width:'400px',}} onClick={()=>{
??? ? ?// 采用了[...xxx]性質(zhì)，
? ? ? let obj = [...data]
? ? ? setData([])
? ? ? // 在原來(lái)的數(shù)組中，在添加一個(gè)對(duì)象
? ? ? obj.push({
? ? ? ? ? 'name':[''],
? ? ? ? ? 'path':['']
? ? ? })
? ? ? setData(obj);
? ?}}>+分組</Button>3.6刪除分組
<MinusCircleOutlined style={{ marginTop: 5, marginLeft: 8, display: data.length == 1 ? 'none' : '' }} onClick={() => {
? ? let flag = 0
? ? ?// 判斷名字/路徑的輸入框中是否有值
? ? ?data[index]['name'].map(item=>{
? ? ? ? ?if(item != ''){
? ? ? ? ? ? ?flag = 1
? ? ? ? ?}
? ? ?})
? ? ?if(flag == 0){
? ? ? ? ?data[index]['path'].map(item=>{
? ? ? ? ? ? ?if(item != ''){
? ? ? ? ? ? ? ? ?flag = 1
? ? ? ? ? ? ?}
? ? ? ? ?})
? ? ?}
?? ? // 如果有值的話，則出現(xiàn)一個(gè)彈框提示用戶這里還是有值的，是否要?jiǎng)h除
? ? ?if(flag){
? ? ? ? ?confirm({
? ? ? ? ? ? ?title: '已經(jīng)編輯了部分?jǐn)?shù)據(jù)，確認(rèn)要?jiǎng)h除',
? ? ? ? ? ? ?icon: <ExclamationCircleOutlined />,
? ? ? ? ? ? ?centered:'true',
? ? ? ? ? ? ?okText:'確認(rèn)',
? ? ? ? ? ? ?cancelText:'取消',
? ? ? ? ? ? ?onOk() {
? ? ? ? ? ? ? ? ?let obj = [...data]
? ? ? ? ? ? ? ? ?setData([])
? ? ? ? ? ? ? ? ?obj.splice(index, 1);
? ? ? ? ? ? ? ? ?setData(obj)
? ? ? ? ? ? ?},
? ? ? ? ? ? ?onCancel() {},
? ? ? ? ?});
? ? ?}else{
? ? ? ? ?let obj = [...data]
? ? ? ? ?setData([])
? ? ? ? ?obj.splice(index, 1);
? ? ? ? ?setData(obj)
? ? ?}
? ??
?}} />4.完整代碼
import React, { useState } from 'react';
import { Input, Row, Col, Button, Divider, Modal } from 'antd'
import { MinusCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
function Index() {
? ? const [data, setData] = useState([
? ? ? ? {
? ? ? ? ? ? 'name': [''],
? ? ? ? ? ? 'path': ['']
? ? ? ? }
? ? ])
? ? return (
? ? ? ? <div style={{ marginLeft: 50, marginTop: 100 }}>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? data.map((item, index) => {
? ? ? ? ? ? ? ? ? ? ? ? return <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{display:'flex'}}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>第{index + 1}組</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{ marginTop: 5, marginLeft: 8, display: data.length == 1 ? 'none' : '' }} onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let flag = 0
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(data[index]['name']);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data[index]['name'].map(item=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(item != ''){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flag = 1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return false
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(flag == 0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data[index]['path'].map(item=>{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(item != ''){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flag = 1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return false
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(flag){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? confirm({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: '已經(jīng)編輯了部分?jǐn)?shù)據(jù)，確認(rèn)要?jiǎng)h除',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: <ExclamationCircleOutlined />,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? centered:'true',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? okText:'確認(rèn)',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cancelText:'取消',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onOk() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onCancel() {},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Divider />
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Row>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.name.map((nameItem, nameIndex) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Col span={8}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', marginTop: 10 }}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span >{'姓名' + (nameIndex + 1) + ':'}</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['name'][nameIndex] = e.target.value
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['name'].splice(nameIndex, 1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Col>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Row>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', width: '100vw', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Button type="dashed" width={200} onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['name'].push('')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>+添加人名</Button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <Row>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.path.map((pathItem, pathIndex) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Col span={8}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', marginTop: 10 }}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span >{'路徑' + (pathIndex + 1) + ':'}</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input style={{ width: 200, marginLeft: 10 }} value={pathItem} onChange={(e) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['path'][pathIndex] = e.target.value
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.path.length == 1 ? 'none' : '' }} onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['path'].splice(pathIndex, 1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Col>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? </Row>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', width: '100vw', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Button type="dashed" width={200} onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['path'].push('')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>+添加路徑</Button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </div>
? ? ? ? ? ? <div style={{display:'flex', width:'100vw', justifyContent:'center', marginTop:10, marginBottom:10}}>
? ? ? ? ? ? ? ? <Button type="dashed" style={{width:'400px',}} onClick={()=>{
? ? ? ? ? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? ? ? ? ? setData([])
? ? ? ? ? ? ? ? ? ? obj.push({
? ? ? ? ? ? ? ? ? ? ? ? 'name':[''],
? ? ? ? ? ? ? ? ? ? ? ? 'path':['']
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? setData(obj);
? ? ? ? ? ? ? ? }}>+分組</Button>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? )
}
export default Index總結(jié)
好了，今天就分享到這里，希望大家在學(xué)習(xí)了一篇博文之后，可以封裝出自己的組件來(lái)應(yīng)對(duì)多種多樣的需求。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- React如何利用Antd的Form組件實(shí)現(xiàn)表單功能詳解
- react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能(完整代碼)
- React表單容器的通用解決方案
- react?表單數(shù)據(jù)形式配置化設(shè)計(jì)
- React事件處理和表單的綁定詳解
- React?Hook?Form?優(yōu)雅處理表單使用指南
- react表單受控的實(shí)現(xiàn)方案
- React實(shí)現(xiàn)表單提交防抖功能的示例代碼
- React中重新實(shí)現(xiàn)強(qiáng)制實(shí)施表單的流程步驟
- react實(shí)現(xiàn)動(dòng)態(tài)增減表單項(xiàng)的示例代碼
- React 實(shí)現(xiàn)表單組件的示例代碼
相關(guān)文章
React?hooks中useState踩坑之異步的問(wèn)題
這篇文章主要介紹了React?hooks中useState踩坑之異步的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用reactjs優(yōu)化了進(jìn)度條頁(yè)面性能提高70%
這篇文章主要介紹了使用reactjs優(yōu)化了進(jìn)度條后頁(yè)面性能提高了70%的操作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用2022-09-09
解決React?hook?'useState'?cannot?be?called?in?
這篇文章主要為大家介紹了React?hook?'useState'?cannot?be?called?in?a?class?component報(bào)錯(cuò)解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
antd4里table滾動(dòng)的實(shí)現(xiàn)
本文主要介紹了antd4里table滾動(dòng)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
React中useEffect 與 useLayoutEffect的區(qū)別
本文主要介紹了React中useEffect與useLayoutEffect的區(qū)別，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
Redux 是React最常用的集中狀態(tài)管理工具,本文主要介紹了React狀態(tài)管理的簡(jiǎn)明指南,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家介紹了React初始化渲染過(guò)程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了React DnD如何處理拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React實(shí)現(xiàn)單向數(shù)據(jù)流的方法
本文主要介紹了React實(shí)現(xiàn)單向數(shù)據(jù)流的方法2023-04-04