Question

在有关示例handling forms in react using hooks的示例之后，我尝试创建自定义钩子。我还应该补充一下，我很新。

这是hooks/useInput.js的内容：

import { useState } from "react";

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(event) {
    console.log(event.target.name);
    console.log(event.target.value);
    setValue(event.target.value);
  }

  return [value, handleChange];
}

export default useInput;

在组件中，我具有以下内容：

import useInput from "hooks/useInput";

export default function Address(props) {
  const [fullName, setFullName] = useInput("");

  return (
    <FormControl fullWidth>
      <CustomInput
        required
        labelText="Full name"
        id="fullName"
        formControlProps={{
          fullWidth: true
        }}
        value={fullName}
        onChange={setFullName}
      />
    </FormControl>
  );
}

当我尝试输入一些文本时（或者即使我尝试更改默认状态），也没有任何反应。我在useInput.js中设置的任何断点都不会命中，并且控制台中也不会显示任何日志记录。

我要去哪里错了？

Answer 1

如果要通过按钮查看当前输入值，可以看到类似的内容。我什至都没有更改您的userInput.js文件。通过执行此操作和控制台，我也可以看到更新的值。

export default function Address(props) {
    const [fullName, setFullName] = useInput("");
    return (
        <>
            <input
                placeholder="Name"
                value={fullName}
                onChange={setFullName}
            />
            <button onClick={() => {
                console.log(fullName);
            }}>Submit</button>
        </>
    );
}

由于我不了解您的CustomInput，因此我使用默认的input和button编写了此文件。请正确检查您的CustomInput。因为默认的input在工作。

自定义反应挂钩设置输入表单不起作用

1 个答案: