React-TypeScript：TypeError：无法读取未定义的属性“ id”

如何解决React-TypeScript：TypeError：无法读取未定义的属性“ id”

我正在使用React-typescript。我有一个登录页面，其中有两个输入字段。一种是电子邮件和密码。我已经创建了一个州，并且在该州内创建了email password和loading。默认输入字段工作正常，我用id定位了输入字段。我已经决定，我将创建全局输入字段和自定义道具。当我使用全局输入字段时，它不会以id为目标，并向我抛出此错误：React-typescript: TypeError: Cannot read property 'id' of undefined。我很确定在我的打字稿onChange中会抛出该错误。但是不知道如何解决它。这是我在Codesandbox中的代码。

这是我的登录表单

import React,{ ReactElement,useState } from "react";

import { TextInput } from "./input";

interface Props extends PageProps {}

export default function SignIn({}: Props): ReactElement {
  const [state,setState] = useState({
    email: ``,password: ``,loading: false
  });
  const { loading,email,password } = state;
  const handleSignIn = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,[e.target.id]: e.target.value //This is id which throws me error
    });
  };
  const onSubmit = async (e) => {
    e.preventDefault();
    console.log(state);
    setState({
      loading: true,...state
    });
    const response = await fetch(
      "https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461",{
        method: `POST`,headers: {
          Accept: `application/json`,"Content-Type": `application/json`
        },body: { state }
      }
    );
    console.log(response);

    if (response.ok) {
      setState({ ...state,loading: false });
      alert(`login succs`);
    } else {
      alert(`login Failed`);
    }
  };
  return (
    <div>
      <TextInput
        type="text"
        value={email}
        onChange={handleSignIn}
        id="email"
        required
      />
      <TextInput
        type="password"
        value={password}
        onChange={handleSignIn}
        id="password"
        required
      />
      <button type="submit" name="action" onClick={onSubmit} disabled={loading}>
        {" "}
        {loading ? `loading...` : `save`}
      </button>
    </div>
  );
}

这是我的全局输入

import React,{ ReactElement } from "react";
import styled from "styled-components";

interface Props {
  value: string;
  onChange: (e: string) => void;
  error?: string;
  id?: string;
}

const Input = styled.input``;

// eslint-disable-next-line func-style
export function TextInput({ value,onChange,error,id }: Props): ReactElement {
  return (
    <div>
      <Input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        error={error}
        id={id}
      />
    </div>
  );
}

解决方法

我找到了解决方案：我创建了两个句柄更改功能，一个用于电子邮件，一个用于密码。

`const handleEmail = (email: string) => {
    setState({
      ...state,email
    });
  };
  const handlePassword = (password: string) => {
    setState({
      ...state,password
    });
  };`