我无法理解错误是啥以及为啥 e.currentTarget.value 为 null

Posted 2023-02-22

【中文标题】我无法理解错误是啥以及为啥 e.currentTarget.value 为 null

【英文标题】：I cannot understand what the error is and why e.currentTarget.value is null我无法理解错误是什么以及为什么 e.currentTarget.value 为 null

【发布时间】：2021-07-25 10:33:05

【问题描述】：

我在 react-typescript 中编写应用程序时遇到了以下错误： 错误：

TypeError：无法读取 null 的属性“值” （匿名函数） D:/GitRepositories/laratte-react/src/containers/SignIn/SignIn.tsx:34

31 |

32 | const onChangeFormInputsHandler = (e: React.FormEvent, key: string) =>

33 | setForm(prev =>

-> 34 | console.log(e.currentTarget.value, key);

| ^ 35 |返回

36 | ...上一页，

37 |输入：

登录 D:/GitRepositories/laratte-react/src/containers/SignIn/SignIn.tsx:8

5 |

6 |常量登录：React.FC = () =>

7 |

-> 8 | const [form, setForm] = useState(

9 |输入：

10 |电子邮件：

11 |值：“”，

代码：

登录组件

const SignIn: React.FC = () => 
   const [form, setForm] = useState<FormConfig>(
      inputs: 
         email: 
            value: "",
            placeholder: "Enter your E-mail",
            type: "email",
            label: "e-mail",
            isClicked: false,
            valid: false,
         ,
         password: 
            value: "",
            type: "password",
            label: "password",
            placeholder: "Enter your password",
            isClicked: false,
            valid: false
         
      ,
      onSubmit: (e: React.FormEvent<htmlFormElement>) =>  e.preventDefault() ,
      valid: false
   );
   const onChangeFormInputsHandler = (e: React.FormEvent<HTMLInputElement>, key: string) => 
      setForm(prev => 
         console.log(e.currentTarget.value, key);
         return 
            ...prev,
            inputs: 
               ...prev.inputs,
               [key]: 
                  ...prev.inputs[key],
                  value: e.currentTarget.value
               
            
         ;
      );
   
   return (
      <>
         <Form form=form onChange=onChangeFormInputsHandler />
      </>
   );



export default SignIn;

表单组件

type FormPropsType = 
   form: FormConfig,
   onChange: (e: React.FormEvent<HTMLInputElement>, key: string) => void

const form: React.FC<FormPropsType> = props => 
   const  inputs, onSubmit, valid  = props.form;
   let formInputs = [];
   for (const key in inputs) 
      formInputs.push(
         name: key,
         ...inputs[key]
      );
   
   return (
      <>
         <div className="form-container">
            <div className="form-container__title">
            </div>
            <div className="form-container__form">
               <form action="">
                  formInputs.map(input => <Input
                     key=input.name
                     ...input
                     onChange=props.onChange />)
               </form>
            </div>
         </div>
      </>
   );

export default form;

输入组件

interface InputPropsType extends InputInterface 
   name: string,
   onChange: (e: React.FormEvent<HTMLInputElement>, key: string) => void

const input: React.FC<InputPropsType> = props => 
   return (
      <div className="form__control">
         props.label ? <label htmlFor="">props.label</label> : null
         <input
            className="form__input"
            type=props.type
            value=props.value
            name=props.name
            placeholder=props.placeholder
            onChange=(e: React.FormEvent<HTMLInputElement>) => props.onChange(e, props.name)
         />
      </div>
   );

export default input;

在任何输入中输入第二个字符后出现错误。 问题很可能不是状态对象被覆盖，而是事件处理程序。

【参考方案1】：

为了解决这个问题，只需要添加一行。

然后使用这个变量

const onChangeFormInputsHandler = (e: React.FormEvent<HTMLInputElement>, key: string) => 
   const formValue = e.currentTarget.value; // this line   
setForm(prev => 
         console.log(formValue, key);
         return 
            ...prev,
            inputs: 
               ...prev.inputs,
               [key]: 
                  ...prev.inputs[key],
                  value: formValue
               
            
         ;
      );