当用户键入内容时将文本存储到会话存储中

Question

我在我的 React 表单（formik 库）中使用以下内容来显示文本字段。

如何在用户在文本字段中完成输入后立即将文本字段的值存储在会话存储中？如果它是 select，我会添加 Onclick 函数来将 selection 存储到会话存储中。

import {Button, InputLabel,Menu,MenuItem, Select, TextField, TextareaAutosize} from '@material-ui/core'
import {styled} from "@material-ui/core/styles";

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

const CustomTextField = ({
                             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}
            />
        </div>
    );
};



<CustomTextField name = "textDescription" type ="text" placeholder="Text Description"/>

我想将它存储在存储中的原因是因为我使用的是 file upload (advanced) 版本，一旦用户单击 upload 按钮，我想从存储中获取描述并使用它在 api 通话中。

输入内容后，我尝试使用以下内容：

  console.log("Printing Document By getElementbyID value");
            console.log(document.getElementById('textDescription').value);

但它一直在打印Uncaught TypeError: document.getElementById(...) is null

根据Bassam Rubaye的回答排查结果：

添加了这样的事件：

<StyledTextField
                    {...field}
                    helperText={errorText}
                    error={!!errorText}
                    onChange={handleChange}  
                />

并尝试了以下方法：

 const handleChange = e => {
        
        console.log("Value of Description");
        console.log(e.target.value);
        
    }

在console.log中打印如下：

Value of Description
t
Value of Description
te
Value of Description
tes
Value of Description
test

是否要将 test 存储在会话存储中？

Answer 1

我不太确定你的用例，但你可以在 StyledTextField 上为“onChange”事件添加一个处理程序，在该处理程序中，你可以将该组件的值添加到 sessionStorage

handleChange(e) {
 /** you will need to throttle the call here as well
     to avoid calling setItem with each change but only calling it after for example 300MS to make sure the user has completed typing
 */
 sessionStorage.setItem("yourKey", e.target.value);

}

当用户键入内容时将文本存储到会话存储中

store the text into session storage when user types something

reactjs

material-ui

formik

formik-material-ui