Reactjs React-TypeScript：使用useRef设置输入的初始值

输入字段显示保存在本地存储器中的值，但我无法编辑输入字段中的值，我不知道为什么

我不想使用占位符，因为我希望能够编辑这些值

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>
    )

}

import React，{useRef，useState}来自“React”；
const ProfileComponent:React.FC=（）=>{
让email=useRef（null）；
const saveEmail=（）=>{
localStorage.setItem（'email'，email）
}
//tslint:禁用下一行：无任何
常量更新=（事件：任意）=>{
如果（event.target.name==='email'）{
setState（{…状态，电子邮件：event.target.value}）；
}else if（event.target.name=='fullName'）{
setState（{…状态，全名：event.target.value}）；
}
};
接口状态接口{
电子邮件：字符串；
}
常量[状态，设置状态]=使用状态({
电子邮件：localStorage.getItem（'email'）| |“”，
});
返回(
)
}

您的输入必须进行一次更改

return (
   <input type='text' name='email' ref={email} onChange={e => setState({email: e.target.value})} 
       value= {state.email} />
     <button onClick={saveEmail}></button>
  )

返回(
setState（{email:e.target.value}）
value={state.email}/>
)

您提供的代码存在一些问题

1） 应该使用（

）包装DOM元素

2） 您可能希望使用

React.FormEvent

，而不是将事件类型设置为

any

3） 您应该使用

localStorage.setItem（'email'，state.email）

而不是

localStorage.setItem（'email'，email）

，因为email是state对象的一部分，因此您必须引用它才能访问值

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>
    )

}

以下是全部更改：

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>
  </>

}

接口状态接口{
电子邮件：字符串；
全名：字符串；
}
const ProfileComponent:React.FC=（）=>{
让email=useRef（null）；
让fullName=useRef（null）；
常量[状态，设置状态]=使用状态({
电邮:'aa@gmail.com' || '',
全名：“aa”| |“，
});
const saveEmail=（）=>{
localStorage.setItem（'email'，state.email）
console.log（状态）；
}
常量更新=（事件：React.ChangeEvent）=>{
如果（event.target.name==='email'）{
setState（{…状态，电子邮件：event.target.value}）；
}else if（event.target.name=='fullName'）{
setState（{…状态，全名：event.target.value}）；
}
};
返回
拯救
}

我可以使用你的答案让它工作，我只是在添加

React时出现了一个tslint错误。FormEvent

我得到的错误

属性“name”在类型“EventTarget”上不存在。ts（2339）

@Bill我犯了一个错误。它应该是

event:React.ChangeEvent

。