Reactjs 用局部状态变量替换会话存储代码

我有一个

CompanyRequestFormJSAbc.js

文件，我正在使用一个表单（formik库）。我想摆脱

sessionStorage

的东西，因此想知道我是否可以定义一个状态变量并将值存储在一个状态中？但我不确定如何定义一个状态，因为它是 不包含类、构造函数等。有人能告诉我如何将下面代码中的所有

会话存储

内容替换为

状态

变量吗

目前，我正在以下代码中的以下4个函数中的会话存储中存储值：

handleDataCategory

无手柄选择的公司和应答器

处理过的零钱

手工公司变更

我想在

constfileupload=（e）=>{

函数中使用我存储在sessionstorage中的值，以便在api调用中使用它

import React from 'react';
import {Field, Form, useField, withFormik} from 'formik';
import {Button, InputLabel,Menu,MenuItem, Select, TextField, TextareaAutosize} from '@material-ui/core'
import * as Yup from 'yup'
import {AutoCompanys} from './forms/AutoCompanys';
//more imports here


const StyledTextField = styled(TextField)( {
    width: '50%',
})

const StyledSelect = styled(Select)( {
    width: '50%',

})


 const handleDataCategory = event => {

      const { datacatValue } = event.currentTarget.dataset;
      sessionStorage.setItem("selectedDataCategory", datacatValue)
    }
                


const CustomSelectDataCategoryField = ({
                               placeholder,
                               disabled,
                               ...props
                           }) => {
    const [field, meta] = useField(props);
    const errorText = meta.error && meta.touched ? meta.error : "";
    const data = JSON.parse(sessionStorage.getItem(field.name))
     
    const menuItems = (data.map((rec, idx) => {
        return (
            <MenuItem key={rec.id} value={rec.id} data-datacat-value = {rec.id} onClick={handleDataCategory}>{rec.value}</MenuItem>
        )
    }))
    return (
        <div>
            <InputLabel id="selectLabel">{placeholder}</InputLabel>
            <Field
                labelId={placeholder}
                {...field}
                disabled={disabled}
                as={StyledSelect}
                error={!!errorText}>
                {menuItems}
            </Field>
        </div>
    );
};


const handleSelectedCompanyAnswer = event => {
    
    const companyValue  = event.currentTarget.dataset.cohort;
    sessionStorage.setItem("companyApprovalAnswer", companyValue)
}


const CustomSelectYesNoCompanyApprovalField = ({
            placeholder,
            disabled,
            ...props
        }) => {
        const [field, meta] = useField(props);

    const errorText = meta.error && meta.touched ? meta.error : "";
   
            return (
            <div>
            <InputLabel id="selectLabel">{placeholder}</InputLabel>
            <Field
                labelId={placeholder}
                {...field}
                disabled={disabled}
                as={StyledSelect}
                error={!!errorText}>
                <MenuItem  data-company-value={'Y'} onClick={handleSelectedCompanyAnswer}>Yes</MenuItem>
                <MenuItem  data-company-value={'N'} onClick={handleSelectedCompanyAnswer}>No</MenuItem> 
            </Field>
            </div>
            );
};



const handleDescChange = e => {
    sessionStorage.setItem("typedProjectDescription", e.target.value)
}

const CustomProjectDescTextField = ({
                            placeholder,
                            ...props
                        }) => {
        const [field, meta] = useField(props);
        const errorText = meta.error && meta.touched ? meta.error : "";
        return (
                <div>
                <InputLabel>{placeholder}</InputLabel>
                <StyledTextField
                {...field}
                helperText={errorText}
                error={!!errorText}
                onChange={handleDescChange}
                />
                </div>
        );
};



function handleCompanyChange(companySet, setFieldValue) {
    
    sessionStorage.setItem("selectedCompanySetId", companySet.companySetId)
    setFieldValue('companySets', companySet.companySetId, false)
}


const CompanyRequestFormAbc = (props) => {

    const {values, setFieldValue, touched, errors, isSubmitting, handleReset, handleChange} = props;
  

    const fileUpload = (e) => {
        console.log('fileupload triggered....' + e.files)

        const companyIDFromSession = sessionStorage.getItem("selectedCompanySetId");
        const dataCategoryIdFromSession = sessionStorage.getItem("selectedDataCategory");
        const companyApprovalAnswerFromSession = sessionStorage.getItem("companyApprovalAnswer");
        const typedProjectDescription = sessionStorage.getItem("typedProjectDescription");

        console.log("Testing all values from session storage when Upload button is clicked");
        console.log("companyIDFromSession "+companyIDFromSession);
        console.log("dataCategoryIdFromSession "+dataCategoryIdFromSession);
        console.log("typedProjectDescription "+typedProjectDescription);


       
    }

    return (
        <div>
            <style jsx>{`
            text-align: center;
            padding: 5px;
            #formEdwDiv {
                padding: 20px;
            }
        `}
            </style>
            <div id="formEdwDiv">
                <Growl ref={growl}/>
                <Form className="form-column-3">
                    
                    <div className="form-field full-width-field">
                        <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Select companys</label>
                        <AutoCompanys
                            fieldName='companySets'
                            value={values.companySets}
                            onChange={ev => handleCompanyChange(ev, setFieldValue)}
                        />
                    </div>
                                    
                    <div className="form-field" ><CustomProjectDescTextField name = "projectDescription" type ="text" placeholder="Project Description"/></div>
                    <div className="form-field full-width-field" >
                        <CustomSelectDataCategoryField name="dataCategories" type="select" placeholder="Select a Data Category"/>
                    </div>
                    <div className="form-field full-width-field" >
                        <CustomSelectYesNoCompanyApprovalField name="yesornoforcompany" type="select" placeholder="Is there an approval by the company?"/>
                    </div>

                    <div className="form-field">
                        <FileUpload
                            name="files"
                            mode='advanced'
                            uploadHandler={fileUpload}
                            customUpload={true}
                            chooseLabel="Attach Files"
                            multiple={false}/>
                    </div> 
                    
                                        
                    </div> 
                    <div className="btn-group-right">
                        <Button size="large" variant="contained" color="primary"
                                type="submit">Submit</Button>
                        <Button size="large" variant="contained" color="primary" onClick={handleReset}
                                style={{marginLeft: '5px'}} type="button">Reset</Button>
                        <Button size="large" variant="contained" color="primary" onClick={props.onCancel}
                                style={{marginLeft: '5px'}} type="button">Cancel</Button>
                    </div>
                </Form>
            </div>
        </div>
    )

};

export const CompanyRequestEnhancedFormAbc = withFormik({
    mapPropsToValues: props => {
        return {
                       //some stuff here
        }
    },
    validationSchema:validationSchema,
    handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) {
              // Do something
    },
    setFieldValue(field, value, shouldVal) {
        console.log('In setFieldValue')
    },

    displayName: 'Company Request Form',
})(CompanyRequestFormAbc)

从“React”导入React；
从'formik'导入{Field，Form，useField，withFormik}；
从“@material ui/core”导入{按钮、输入标签、菜单、菜单项、选择、文本字段、文本区域自动大小}
从“Yup”导入*为Yup
从“./forms/AutoCompanys”导入{AutoCompanys}；
//这里有更多的进口货
const StyledTextField=已设置样式（TextField）（{
宽度：“50%”，
})
const StyledSelect=已设置样式（选择）（{
宽度：“50%”，
})
const handleDataCategory=事件=>{
const{datacatValue}=event.currentTarget.dataset；
setItem（“selectedDataCategory”，datacatValue）
}
常量CustomSelectDataCategoryField=({
占位符，
残废
…道具
}) => {
const[field，meta]=useField（props）；
常量errorText=meta.error&&meta.toucted？meta.error:；
const data=JSON.parse（sessionStorage.getItem（field.name））
const menuItems=（data.map（（rec，idx）=>{
返回(
{rec.value}
)
}))
返回(
{占位符}
{menuItems}
);
};
const handleselectedcompanyswer=事件=>{
const companyValue=event.currentTarget.dataset.Coquent；
sessionStorage.setItem（“companyApprovalAnswer”，companyValue）
}
常量CustomSelectYesNoCompanyApprovalField=({
占位符，
残废
…道具
}) => {
const[field，meta]=useField（props）；
常量errorText=meta.error&&meta.toucted？meta.error:；
返回(
{占位符}
对
不
);
};
const handleDescChange=e=>{
setItem（“typedProjectDescription”，例如target.value）
}
常量CustomProjectDescTextField=({
占位符，
…道具
}) => {
const[field，meta]=useField（props）；
常量errorText=meta.error&&meta.toucted？meta.error:；
返回(
{占位符}
);
};
函数handleCompanyChange（companySet，setFieldValue）{
sessionStorage.setItem（“selectedCompanySetId”，companySet.companySetId）
setFieldValue（'companySet'，companySet.companySetId，false）
}
const CompanyRequestFormAbc=（道具）=>{
const{values，setFieldValue，toucted，errors，isSubmitting，handleReset，handleChange}=props；
const fileUpload=（e）=>{
console.log（'fileupload-triggered…'+e.files）
const companyIDFromSession=sessionStorage.getItem（“selectedCompanySetId”）；
const dataCategoryIdFromSession=sessionStorage.getItem（“selectedDataCategory”）；
const companyApprovalAnswerFromSession=sessionStorage.getItem（“companyApprovalAnswer”）；
const typedProjectDescription=sessionStorage.getItem（“typedProjectDescription”）；
log（“单击上载按钮时测试会话存储中的所有值”）；
log（“companyIDFromSession”+companyIDFromSession）；
log（“dataCategoryIdFromSession”+dataCategoryIdFromSession）；
console.log（“typedProjectDescription”+typedProjectDescription）；
}
返回(
{`
文本对齐：居中；
填充物：5px；
#formEdwDiv{
填充：20px；
}
`}
选择公司
handleCompanyChange（ev，setFieldValue）}
/>
提交
重置
取消
)
};
export const CompanyRequestEnhancedFormAbc=withFormik({
mapPropsToValues:props=>{
返回{
//这里有些东西
}
},
validationSchema:validationSchema，
handleSubmit（值，{props，resetForm，setErrors，setSubmitting}）{
//做点什么
},
setFieldValue（字段、值、shouldVal）{
console.log（'In setFieldValue'）
},
displayName:“公司申请表”，
})（公司申请表）