分配的输入值未定义，因为永远不会触发 onChange答案

【问题标题】：Assigned input value is undefined since onChange is never triggered分配的输入值未定义，因为永远不会触发 onChange
【发布时间】：2021-06-04 20:09:38
【问题描述】：

我需要解决以下问题...

当用户注册成功时，他会被重定向到登录页面，其中填写了电子邮件输入字段并专注于密码字段。（电子邮件通过参数发送）

现在由于未触发 onChange 事件（因为未键入电子邮件），它的值返回未定义，因此登录失败。

有没有办法解决这个问题？

你可以在下面找到我的代码

const email = queryString.parse(location.search).email; // returns email correctly

以下是一个组件，所以每个属性都设置为name={props.name} value={props.value}等

const handleChange = (name, value) => {
    setData((prev) => ({ ...prev, [name]: value }));
};

<InputField name="email" type="email" onChange={handleChange} value={email ? email : ""}

因此，当手动输入所有内容时，data 会按预期更新并且一切正常，但是当从注册重定向到登录并通过 email 变量填写字段时，数据中的电子邮件将是未定义的。

当电子邮件作为输入字段中的值放置时，有没有办法触发 onChange？

提前致谢！

【问题讨论】：

标签： javascript reactjs forms

【解决方案1】：

问题是handleChange没有得到name和value的参数

您可以尝试类似：（假设名称是定义的变量）

<InputField name="email" type="email" onChange={(e, {value}) => handleChange(name, value)} value={email ? email : ""}

【讨论】：

思南感谢您的回复，但这似乎不起作用...
好吧，我自己修好了：）useEffect(() => { const getVal = document.querySelectorAll("input[type='email']")[0].value; if (getVal) setData((prev) => ({ ...prev, email: getVal })); }, []);

【解决方案2】：

我做了一个简单的代码，但我不知道你真正需要什么，你可以检查：

或者

import React, { useState } from "react";

const Sample = (props) => {
  // const query = window.location.search;
  const query = window.location;
  const [value, setValue] = useState(query);

  const handleValueOnChange = (e) => {
    setValue(e.target.value);
  };

  console.log(query);
  return (
    <div>
      <input onChange={handleValueOnChange} value={value} />
    </div>
  );
};

export default Sample;

希望能帮到你。

【讨论】：

感谢杰伊的关注！我用一些简单的东西自己修复了它。再次感谢:)