如何在useState中生成这种类型的Json对象，并在react js中通过表单设置值
如何在useState中生成这种类型的Json对象，并在react js中通过表单设置值
提问于 2022-08-28 15:24:48
--我想使用react中的表单将一组数据上传到服务器，我创建了一个表单，在这种形式下，我需要一些动态字段，比如数据中的tokenomics.sale字段，所以我不知道如何使用useState来实现它。我是新的反应js，我也搜索，但没有找到任何例子。
import { useState, React } from 'react'
import { AiOutlinePlus } from "react-icons/ai"
import { AiOutlineMinus } from "react-icons/ai"
import "./admin.css"
function Admin(props) {
const [inputValues, setInputValues] = useState({
igo_name: '',
categroy: '',
tge_date: '',
token_type: '',
token_ticker: '',
logo_link: '',
back_img_link: '',
igo_tags: '',
short_decrp: '',
long_decrp: '',
website: '',
twitter: '',
telegram: "",
medium: '',
whitepaper: '',
toke_utility: '',
igo_chars: [],
igo_trailers: [],
tokenomics: { sale: [], all: [] },
backers: [],
team_members: [],
roadmap: [],
cex_listing: [
]
});
const [Charcounter, setCharCounter] = useState(3);
const [Salecounter, setSaleCounter] = useState(1);
// Adding Add Field Functions
const addIgoCharField = () => {
setCharCounter(Charcounter + 1)
}
const addIgoSaleField = () => {
setSaleCounter(Salecounter + 1)
}
const OnHandleChange = (e) => {
const value = e.target.value;
const id = e.target.id;
setInputValues(prev => {
return {
...prev,
[id]: value
}
});
}
// +====================== SETTING TRAILERS HANDLER ======================
const trailerHandler = (e) => {
const { id, className, value } = e.target;
setInputValues(prev => {
const copyData = prev;
copyData.igo_trailers[className] = value;
// console.log(JSON.stringify(copyData, null, 2))
return copyData;
});
}
// +====================== SETTING CHARACTER HANDLER ======================
const characterHandler = (e) => {
const { id, className, value } = e.target;
setInputValues(prev => {
const copyData = prev;
copyData.igo_chars[className] = value;
console.log(JSON.stringify(copyData, null, 2))
return copyData;
});
}
// +====================== SETTING CHARACTER HANDLER ======================
const salerHandler = (e) => {
const { id, className, value } = e.target;
console.log(e.target.dataset.place)
setInputValues(prev => {
console.log("className= " + className + "\nPlace= " + e.target.dataset.place)
const copyData = prev;
const saleData = {
type: copyData.tokenomics.sale[className]?.type,
percent: copyData.tokenomics.sale[className]?.percent,
price: copyData.tokenomics.sale[className]?.price,
tge_percent: copyData.tokenomics.sale[className]?.tge_percent,
cliff: copyData.tokenomics.sale[className]?.cliff,
remain: copyData.tokenomics.sale[className]?.remain,
platforms: [{
logo: copyData.tokenomics.sale[className]?.platforms[e.target.dataset.place]?.logo,
url: copyData.tokenomics.sale[className]?.platforms[e.target.dataset.place]?.url,
}]
};
if (id === 'type') {
saleData.type = value;
} else if (id === 'percent') {
saleData.percent = value;
} else if (id === 'price') {
saleData.price = value;
} else if (id === 'tge_percent') {
saleData.tge_percent = value;
} else if (id === 'cliff') {
saleData.cliff = value;
} else if (id === 'remain') {
saleData.remain = value;
} else if (id === 'logo') {
saleData.platforms[e.target.dataset.place].logo = value;
} else if (id === 'url') {
saleData.platforms[e.target.dataset.place].url = value;
}
copyData.tokenomics.sale[className] = saleData;
return copyData;
});
}
return (
<div className='container admin-pannel'>
{/*==============Adding IGO Here=================*/}
<div className='cards add-igo'>
<div className='add-igo-expand'>
<h3>Add IGO</h3>
<button className="add-igo-expand-icon" onClick={() => setIsAddIgoShowing(prev => !prev)}>{isAddIgoShowing ? <AiOutlineMinus /> : <AiOutlinePlus />}</button>
</div>
{
isAddIgoShowing &&
<div className='add-igo-form-wrapper'>
<form className='add-igo-form'>
<div className='add-details-1'>
<input type='text' onChange={OnHandleChange} id="igo_name" placeholder='IGO Name' />
<input type='text' onChange={OnHandleChange} id="categroy" placeholder='IGO Category' />
<input type='text' onChange={OnHandleChange} id="tge_date" placeholder='IGO TGE Date' />
<input type='text' onChange={OnHandleChange} id="token_type" placeholder='IGO Token Type' />
<input type='text' onChange={OnHandleChange} id="token_ticker" placeholder='IGO Token Ticker' />
<input type='text' onChange={OnHandleChange} id="logo_link" placeholder='IGO Logo Link' />
<input type='text' onChange={OnHandleChange} id="back_img_link" placeholder='IGO Back Image Link' />
<input type='text' onChange={OnHandleChange} id="igo_tags" placeholder='IGO Tags' />
<input type='text' onChange={OnHandleChange} id="short_decrp" placeholder='IGO Short Decrp(max 30 words)' />
<input type='text' onChange={OnHandleChange} id="long_decrp" placeholder='IGO Long Decrp' />
<input type='text' onChange={OnHandleChange} id="website" placeholder='IGO Website' />
<input type='text' onChange={OnHandleChange} id="twitter" placeholder='IGO Twitter' />
<input type='text' onChange={OnHandleChange} id="telegram" placeholder='IGO Telegram' />
<input type='text' onChange={OnHandleChange} id="medium" placeholder='IGO Medium' />
<input type='text' onChange={OnHandleChange} id="whitepaper" placeholder='IGO Whitepaper' />
<input type='text' onChange={OnHandleChange} id="toke_utility" placeholder='IGO Token Utility' />
</div>
<div className='common-section add-igo-trailer'>
<h3>Add IGO Trailers</h3>
<section>
<input type='text' onChange={trailerHandler} className={0} id="igo_trailers" placeholder='IGO Trailer 1' />
<input type='text' onChange={trailerHandler} className={1} id="igo_trailers" placeholder='IGO Trailer 2' />
</section>
</div>
<div className='common-section add-igo-char'>
<h3>Add IGO Characters</h3>
<section>
{Array.from(Array(Charcounter)).map((c, index) => {
return <input type='text' onChange={characterHandler} id="igo_chars" placeholder={`IGO Char ${index + 1}`} className={index} />
})}
</section>
<div className='add-feild-btn-container'>
<span className='add-fieild' onClick={addIgoCharField}>Add Character</span>
</div>
</div>
<div className='common-section add-igo-tokenomics'>
<h3>Add IGO Tokenomics</h3>
<section>
<input type='text' onChange={OnHandleChange} id="total_supply" placeholder='Token Total Supply' />
</section>
</div>
{/* ============================Adding Tokenomics=====================*/}
<div className='common-section add-igo-sale'>
<h3>Add IGO Sale</h3>
<p>{JSON.stringify(inputValues, null, 2)}</p>
<section>
{
Array.from(Array(Salecounter)).map((c, index) => {
return (
<div>
<input type='text' onChange={salerHandler} className={index} id="type" placeholder={`Sale Type ${index}`} />
<input type='text' onChange={salerHandler} className={index} id="percent" placeholder='Sale Percent' />
<input type='text' onChange={salerHandler} className={index} id="price" placeholder='Sale Price Per token' />
<input type='text' onChange={salerHandler} className={index} id="tge_percent" placeholder='Sale at TGE' />
<input type='text' onChange={salerHandler} className={index} id="cliff" placeholder='Sale Cliff' />
<input type='text' onChange={salerHandler} className={index} id="remain" placeholder='Sale Vesting' />
{
Array.from(Array(4)).map((c, index_a) => {
return (
<div className='sale-platform'>
<input type='text' onChange={salerHandler} className={index} data-place={index_a} id="logo" placeholder={`Sale Platform ${index_a + 1} Logo`} />
<input type='text' onChange={salerHandler} className={index} data-place={index_a} id="url" placeholder={`Sale Platform ${index_a + 1} Url`} />
</div>
)
})
}
</div>
)
})
}
</section>
<div className='add-feild-btn-container'>
<span className='add-fieild' onClick={addIgoSaleField}>Add Sale</span>
</div>
</div>
</form>
</div>
}
</div>
<div className='cards update-igo'></div>
<div className='cards delete-igo'></div>
</div>
)
}
export default Admin我需要什么样的json对象
{
trending: 12,
name: "Apex Legends",
logo: 'https://www.pngitem.com/pimgs/b/128-1283122_jacksepticeye-png.png',
back_image: "https://c4.wallpaperflare.com/wallpaper/615/444/957/wraith-apex-legends-apex-legends-hd-wallpaper-preview.jpg",
category: "Battle royale",
tags: "#TopIGO #LOL #Play2Earn ",
views: '10.5k',
rating: "8",
likes: "15.2k",
token_type: "BSC-20",
token_ticker: "FURY",
short_decrp: "Apex Legends is a free-to-play battle royale-hero shooter game developed by Respawn Entertainment and published by Electronic Arts.",
long_decrp: "Apex Legends is a free-to-play battle royale-hero shooter game developed by Respawn Entertainment and published by Electronic Arts. It was released for Microsoft Windows, PlayStation 4, and Xbox One in February 2019, for Nintendo Switch in March 2021, and for PlayStation 5 and Xbox Series X/S in March. ",
website: "https://t.me/pixelbit_ann",
telegram: "https://t.me/pixelbit_ann",
twitter: "https://t.me/pixelbit_ann",
TGE: "13-MAY-20222",
igo_chars: [
"https://www.pngitem.com/pimgs/b/455-4553161_legends-png.png",
"https://www.pngitem.com/pimgs/b/536-5365765_legends-png.png",
"https://www.pngitem.com/pimgs/b/145-1457964_body-png.png"
],
trailers: [
"https://drive.google.com/uc?id=11W7HF-IDu5VW09vM5Aop40QcpckTn_2z",
"https://www.youtube.com/watch?v=Jcr8qmrnOKE"
],
token_utility: "The Main Token Of Engines Of Fury Will Be Based On The ERC-20 Standard And Bridged To BSC. However, We Are Also Currently Looking Into Other Cross-Chain Solutions Such As Polygon And Solana, That Might Be Added Soon After The Launch.$FURY Is The Project Token In Which A Public Sale Will Be Held. It Is The Game Transaction Token, Which Will Be Used To Exchange For Other Crypto-Currencies, Buy Or Forge Nfts, Participate In Arenas, And For Staking.",
tokenomics: {
total_supply: 50000000000,
sale: [
{
type: "Seed Sale",
percent: 1,
price: 0.0001600,
vesting: {
tge_percent: 10,
cliff: "3 Months",
remain: "24 Months"
},
platforms: [
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
}
]
},
{
type: "Private Sale",
percent: 15,
price: 0.0003,
vesting: {
tge_percent: 10,
cliff: "3 Months",
remain: "24 Months"
},
platforms: [
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
}
]
},
{
type: "Public Sale",
percent: 3,
price: 0.0003,
vesting: {
tge_percent: 20,
cliff: "3 Months",
remain: "12 Months"
},
platforms: [
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
}
]
}
],
all: [
{
type: "Team",
percent: 18,
vesting: {
tge_percent: 0,
cliff: "6 Months",
remain: "24 Months"
}
},
{
type: "Community",
percent: 2,
vesting: {
tge_percent: 20,
cliff: "3 Months",
remain: "12 Months"
}
},
{
type: "Advisors",
percent: 6,
vesting: {
tge_percent: 0,
cliff: "6 Months",
remain: "24 Months"
}
},
{
type: "Staking",
percent: 7,
vesting: {
tge_percent: 0,
cliff: "3 Months",
remain: "24 Months"
}
},
{
type: "Liquidity",
percent: 1,
vesting: {
tge_percent: 100,
cliff: "0 Months",
remain: "0 Months"
}
},
{
type: "Treasury",
percent: 25,
vesting: {
tge_percent: 2,
cliff: "0 Months",
remain: "24 Months"
}
},
{
type: "Marketing",
percent: 18,
vesting: {
tge_percent: 2,
cliff: "0 Months",
remain: "24 Months"
}
},
{
type: "Exchange Reserve",
percent: 3,
vesting: {
tge_percent: 10,
cliff: "3 Months",
remain: "24 Months"
}
},
{
type: "Airdrop",
percent: 1,
vesting: {
tge_percent: 0,
cliff: "1 Months",
remain: "1 Months"
}
},
]
}[check this image so you can get idea what i want to make][1]1
回答 1
Stack Overflow用户
发布于 2022-08-28 15:51:38
将value给您的输入标记。你的错误就会消失
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73519951
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号