如何使用打字稿获取输入值输入请求

问题描述

我想获取输入值并将其放入json 但我不知道在这种情况下如何获取输入值

如果我尝试了document.querySelector（“ todo-text”）。value 原来是错误。

const NewTodo: React.FC<NewTodoProps> = (props) => {
  /*   const textInputRef = useRef<HTMLInputElement>(null); */
  const formData = new FormData();
  const photos = document.querySelector('input[type="text"][multiple]');

  const data = {
    word: document.querySelector<HTMLInputElement>("todo-text").value,meaning: document.getElementById("todo-meaning"),};

  const handleSubmit = async () => {
    const body = JSON.stringify(data);
    debugger;
    const response = await fetch("https://localhost:5001/api/vocas",{
      method: "POST",// *GET,POST,PUT,DELETE,etc.
      //mode: "cors",// no-cors,*cors,same-origin
      //cache: "no-cache",// *default,no-cache,reload,force-cache,only-if-cached
      //credentials: "same-origin",// include,*same-origin,omit
      headers: {
        "Content-Type": "application/json",Accept: "*/*",},//redirect: "follow",// manual,*follow,error
      //referrerPolicy: "no-referrer",// no-referrer,*no-referrer-when-downgrade,origin,origin-when-cross-origin,same-origin,strict-origin,strict-origin-when-cross-origin,unsafe-url
      body: body,// 本文のデータ型は "Content-Type" ヘッダーと一致する必要があります
    });
    debugger;
    const result = await response.json();
    console.log(result);
    return;
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-control">
        <label htmlFor="todo-text">単語:</label>
        <input type="text" id="todo-text" />
        <br />
        <label htmlFor="todo-meaning">意味:</label>
        <input type="text" id="todo-meaning" />
      </div>
      <button type="submit">追加</button>
    </form>
  );
};

在这种情况下，如何获取输入值？

解决方法

我们需要使用useState来捕获用户输入

import {useState} from 'react';

const[toDoText,setToDoText] = useState("");
    

在输入字段中添加一个onChange事件

    const handleInput = (event : React.ChangeEvent<HTMLInputElement>) => {
            let target = event.target;
            setToDoText((currentState) => {
                return target.value;
            })
        }
      <input type="text" id="todo-text" onChange={handleInput} />