尝试使用 Typescript 在简单的 React 表单组件中使用 handleChange。难以访问 e.target.value

Posted 2023-02-23

【中文标题】尝试使用 Typescript 在简单的 React 表单组件中使用 handleChange。难以访问 e.target.value

【英文标题】：Trying to use a handleChange in a simple React form component using Typescript. Struggling with accessing e.target.value

【发布时间】：2021-11-09 18:55:42

【问题描述】：

我是 Typescript 的初学者，但我喜欢认为我知道在 React 方面我在做什么。这个编码挑战需要我构建一个简单的多页注册表单。

我的做法是跟踪 App 状态的进度，并根据进度有条件地显示五个“表单阶段”组件之一。首先它会询问您的姓名，然后是电话，然后是电子邮件。这不是我喜欢我的表格的方式，但这是必需的。

目前我正在努力让一个简单的 changeHandler 工作。这是我的组件的 Props 界面，当用户进度 === 0 时应该会出现。

interface Props 
    firstName: string;
    lastName: string;
    handleChange: (e: React.ChangeEvent<htmlInputElement> | undefined) => void;

这就是我观察输入字段的方式

    const [first, setFirst] = useState<string>("");
    const [last, setLast] = useState<string>("");
    const inputRef = useRef<HTMLInputElement>(null);

最后，这是一个示例字段：

      <input
                ref=inputRef
                id="firstName"
                type="text"
                value=last
                onChange=handleChange   // Some function logic here
            ></input>

通常，我会构造一个像这样的输入字段（例如）：

<textarea
                className="post-draft"
                name="post"
                onChange=(e) => 
                    handleChange(e);
                
                rows=2
            />

然后我将拥有一个使用 if(e.target.name === "post") 等的 handleChange 函数来执行不同的状态更改。

如何在 TS 中复制这种行为？ 在 App.tsx 中，我需要在大括号内放入什么内容才能正确编译？

<FullName firstName="" lastName="" />

handleChange 显然也需要进入这里。我完全不知道如何以及为什么。

【参考方案1】：

我不知道我是否做对了，但是您需要有关 InputBox 的 HandleChange 的帮助，并且您想在单击按钮后获取 InputBoxes 中的所有值？就像您正在检查表单是否正确，然后就转到下一页？

如果是这种情况，您可以在更改时使用 useEffect。

完整的应用代码示例：

import  useState  from "react";

function App() 

  const inputStyle = float:"left",clear:"left",marginTop:"20px",height:"30px",width:"200px",fontSize:"18px",textAlign:"center";
  const buttonStyle = float:"left",clear:"left",marginTop:"20px",height:"30px",width:"200px",fontSize:"18px",textAlign:"center",backgroundColor:"#005dc7",borderRadius:"5px",color:"white",border:"0px",cursor:"pointer";
  const containerStyle = display:"block",alignItems:"center",width:"400px",margin:"0 auto";
  const [email,setEmail] = useState("");
  const [name,setName] = useState("");
  const [surname,setSurname] = useState("");

  const onNext = (event) =>
  
      event.preventDefault(); //Prevent the normal "Form" handle
      if(email && name && surname) //if everything is set (not null and not empty)
      
        console.log("email : "+email);
        console.log("name : "+name);
        console.log("surname : "+surname);
        console.log("ALL DONE! GO NEXT PAGE!");
      
      else
      
        console.log("SOMETHING IS LEFT EMPTY!");
      
  

  return (
    <>
    <div style=containerStyle>
      <h1>Register Form</h1>
      <form>
        <input style=inputStyle  type="text" placeholder="Your Email" onChange=(event) => setEmail(event.target.value)/>
        <input style=inputStyle type="text" placeholder="Your Name" onChange=(event) => setName(event.target.value)/>
        <input style=inputStyle type="text" placeholder="Your Surname" onChange=(event) => setSurname(event.target.value)/>
        <input style=buttonStyle type="button" value="Next" onClick=event => onNext(event)></input>
      </form>
    </div>
    </>

  );





export default App;

希望它是正确的，它会有所帮助！