如何在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

这是您如何在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))}/>

Answer 2

请结帐此问题：

这里已经回答过了:

React JSX:选择“selected”on selected

Answer 3

如何在状态中存储多个值

为此，您需要为所有四个选择框定义状态，如下所示

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>

您也可以对其他选择框执行相同的操作