如何在useState中存储选定的值

Question

我是React JS的初学者。我想学习如何在useState中存储选定的值。

该表单包含四个不同的下拉列表，我想将这些选定的值存储在useState中，以便在多步骤表单结束时，用户可以返回编辑sub-之前的字段

import React, {useState} from 'react';
import './paperdetails.css';
import IncDecCounter from './IncDecCounter'
import {
Text
} from '@chakra-ui/react';
const PaperDetails = () => {
const [selected, setSelected] = useState();
return (
<div className='paper-details'>
<div className='paper-details_display_flex'>
<div className='left'>
<div className='left-calc_wrapper'>
<div>
<label>Type of Paper</label>
<select>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
</div>
<div>
<label>Study Level</label>
<select>
<option value="school">Bachelor</option>
<option value="college">College</option>
<option selected value="Bachelor">School</option>
<option value="Masters">Masters</option>
</select>
</div>
</div>
<div className='left_middle'>
<div className='calc-control'>
<label>Number of Pages</label>
<IncDecCounter />
</div>
<div className="select-deadline">
<label>Deadline</label>
<select className='deadline' value={selected} onChange={e=>setSelected(e.target.value)}>
<option value="1 hour">1 hour</option>
<option value="3 hours">3 hours</option>
<option selected value="8 hours">8 hours</option>
<option value="12 hours">12 hours</option>
<option value="24 hours">24 hours</option>
<option value="48 hours">48 hours</option>
<option selected value="3 days">3 days</option>
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option selected value="14 days">14 days</option>
</select>
<span color={'#785aec'} fontSize={'14px'}
fontWeight={'bold'}> Will be ready in: {selected}
</span>
</div>
</div>
<section className="writing-instructions">
<div className="writing_instructions">
<div className="d-flex">
<label className='instructions'>
Writing instructions
<span className='text-orange'>  *required</span>
</label>
<input className="input-file" id="my-file" type="file" 
accept="application/pdf,application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
<label tabindex="0" for="my-file" className="input-file-trigger">
<span className='span--underlinel-blue'>  Upload writing Instructions</span>
</label>
</div>
<div className='text-area'>
<textarea className='text-area_main' 
placeholder='Type your instructions here. Please provide as many details as possible.'></textarea>
</div>
</div>
</section>
</div>
<div className='right'>
<div className='total-row'>
<div className='total-text'>
<h1 className='total-text_h1'>Total:</h1>
<span className='span_price'>$0.00</span>
</div>
</div>
</div>
</div>
</div>
)
}
export default PaperDetails;

Answer 1

如何在状态中存储多个值

要做到这一点，您需要定义所有四个选择框的状态，如

const [seleccedValue1,setSelectedValue1]=useState(null);
const [seleccedValue2,setSelectedValue2]=useState(null);
const [seleccedValue3,setSelectedValue3]=useState(null);
const [seleccedValue4,setSelectedValue4]=useState(null);

然后你需要处理每个选择框的更改事件，就像这个

<select onChange={(e)=>{setSelectedValue1(e.target.value)}}>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>

你也可以对的其他选择框做同样的操作

Answer 2

请检查这个问题：

这里已经回答了：

React JSX：选择"；选择"；在选定<选择>选项

Answer 3

以下是如何在useState((中存储任何输入字段的值；

const [selected,setSelected] = useState({});
function handleChange(event){
setSelected({...selected,[event.targe.id]=event.target.value});
}
return(
<select 
id={"id_0"}
value={selected["id_0"]} 
onChange={(event)=>(handleChange(event))}>

"您的代码在此继续"；

下面是如何处理多个输入字段。

<select  id={'id_1'}  value={selected['id_1']} 
onChange={(event)=>(handleChange(event))}/>
<select  id={'id_2'} value={selected['id_2']} 
onChange={(event)=>(handleChange(event))}/>