[英]React TypeScript: Set initial value for input with useRef
The input field displays the value saved in local storage, but I can't edit the value in the input field and I don't know why.输入字段显示保存在本地存储中的值,但我无法编辑输入字段中的值,我不知道为什么。
I don't want to use a placeholder as I want to be able to edit the values.我不想使用占位符,因为我希望能够编辑值。
import React, { useRef, useState } from 'react';
const ProfileComponent: React.FC = () => {
let email = useRef<HTMLInputElement>(null);
const saveEmail = () => {
localStorage.setItem('email', email)
}
// tslint:disable-next-line: no-any
const update = (event: any) => {
if (event.target.name === 'email') {
setState({ ...state, email: event.target.value });
} else if (event.target.name === 'fullName') {
setState({ ...state, fullName: event.target.value });
}
};
interface StateInterface {
email: string;
}
const [state, setState] = useState<StateInterface>({
email: localStorage.getItem('email') || '',
});
return (
<input type='text' name='fullName' ref={fullName} onChange={update} value={state.fullName} />
<input type='text' name='email' ref={email} onChange={update} value={state.email} />
<button onClick={saveEmail}></button>
)
}
There are a few issues with the code you have provided您提供的代码存在一些问题
1) You should wrap the DOM elements with React Fragments ( <> </>
) 1) 你应该用React Fragments (
<> </>
) 包装 DOM 元素
2) Instead of setting the type of event as any
, you might want to use React.FormEvent<HTMLInputElement>
. 2)您可能想要使用
React.FormEvent<HTMLInputElement>
,而不是将事件类型设置为any
。
3) You should use localStorage.setItem('email', state.email)
instead of localStorage.setItem('email', email)
, since email is a property as part of the state object, thus you will have to reference it in order to access the values. 3) You should use
localStorage.setItem('email', state.email)
instead of localStorage.setItem('email', email)
, since email is a property as part of the state object, thus you will have to reference it in为了访问值。
Here are the full changes below:以下是以下完整更改:
interface StateInterface {
email: string;
fullName: string;
}
const ProfileComponent: React.FC = () => {
let email = useRef<HTMLInputElement>(null);
let fullName = useRef<HTMLInputElement>(null);
const [state, setState] = useState<StateInterface>({
email: 'aa@gmail.com' || '',
fullName: 'aa' || '',
});
const saveEmail = () => {
localStorage.setItem('email', state.email)
console.log(state);
}
const update = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.name === 'email') {
setState({ ...state, email: event.target.value });
} else if (event.target.name === 'fullName') {
setState({ ...state, fullName: event.target.value });
}
};
return <>
<input type='text' name='fullName' ref={fullName} onChange={update} value={state.fullName} />
<input type='text' name='email' ref={email} onChange={update} value={state.email} />
<button onClick={saveEmail}>save</button>
</>
}
You have to have an onChange in your input您的输入中必须有一个 onChange
return (
<input type='text' name='email' ref={email} onChange={e => setState({email: e.target.value})}
value= {state.email} />
<button onClick={saveEmail}></button>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.