我无法理解错误是什么以及为什么 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 |输入：{

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;

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

【问题讨论】：

标签： reactjs react-typescript

【解决方案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
               }
            }
         };
      });
   }

【讨论】：