React TypeScript：使用 useRef 设置输入的初始值答案

【问题标题】：React TypeScript: Set initial value for input with useRefReact TypeScript：使用 useRef 设置输入的初始值
【发布时间】：2019-11-08 06:57:02
【问题描述】：

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

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

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

}

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

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

1) 你应该用 React Fragments (<> </>) 包裹 DOM 元素

2) 您可能希望使用React.FormEvent<HTMLInputElement>，而不是将事件类型设置为any。

3) 您应该使用localStorage.setItem('email', state.email) 而不是localStorage.setItem('email', email)，因为电子邮件是作为状态对象一部分的属性，因此您必须引用它才能访问这些值。

以下是完整的更改：

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

}

【讨论】：

当我添加 React.FormEvent<HTMLInputElement> 我得到错误Property 'name' does not exist on type 'EventTarget'.ts(2339)
@Bill 我犯了一个错误。它应该是event: React.ChangeEvent<HTMLInputElement>。

【解决方案2】：

你的输入必须有一个 onChange

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

【讨论】：

我能够使用你的答案来让它工作我只是留下了一个 tslint 错误，因为没有任何