有没有办法处理 onSubmit 中的输入隐藏值？答案

【问题标题】：Is there a way to handle input hidden value in onSubmit?有没有办法处理 onSubmit 中的输入隐藏值？
【发布时间】：2021-03-18 01:34:24
【问题描述】：

我正在创建一个待办事项应用程序，我正在考虑使用 post 方法发送我要删除的待办事项的 ID 以将其删除。我目前正在使用<form action="localhost" method="delete">，但我想做一些更复杂的事情，所以我试图将 id 传递给 OnSubmit 处理程序。有没有办法在 OnSubmit 中使用 id？有什么办法可以在 OnSubmit 中使用 id 吗？

实现的代码

import React, {useState, useEffect} from "react";
import axios from "axios";

interface Todo {
    id: number,
    text: string,
}

const ShowContent = () => {
    const [todoes, setTodoes] = useState<Todo[]>([]);

    useEffect(() => {
        axios.get<Todo[]>("http://localhost:8888")
            .then(res => {
                setTodoes(res.data)
            })
            .catch(_ => alert("useeffect error"))
    }, [])

    return (
        <div>
            <h1>Todo App</h1>
            {todoes.map(todo =>
                <div key={todo.id}>
                    <div>id: {todo.id}, text: {todo.text}</div>
                    <form action="localhost:8888" method="post">
                        <input type="hidden" name="id" value={todo.id}></input>
                        <button>Delete</button>
                    </form>
                </div>
            )}
            <div>
                <form action="localhost:8888" method="post">
                    <input type="text"></input>
                    <button>Submit</button>
                </form>
            </div>
        </div>
    );
}

我想做的事

import React, {useState, useEffect} from "react";
import axios from "axios";

interface Todo {
    id: number,
    text: string,
}

const ShowContent = () => {
    const [todoes, setTodoes] = useState<Todo[]>([]);

    useEffect(() => {
        axios.get<Todo[]>("http://localhost:8888")
            .then(res => {
                setTodoes(res.data)
            })
            .catch(_ => alert("useeffect error"))
    }, [])

    const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        
        // I want to get the id here.
    }
    
    return (
        <div>
            <h1>Todo App</h1>
            {todoes.map(todo =>
                <div key={todo.id}>
                    <div>id: {todo.id}, text: {todo.text}</div>
                    <form onSubmit={handleOnSubmit}>
                        <input type="hidden" name="id" value={todo.id}></input>
                        <button>submit</button>
                    </form>
                </div>
            )}

        </div>
    );
}

export default ShowContent;

【问题讨论】：

必须是表单提交吗？你不能在点击删除按钮后使用 ajax 发送删除请求吗？
我认为你可以这样做。在这种情况下，我想使用表单来发送 id。

标签： reactjs typescript forms

【解决方案1】：

可以通过使用e.target 和FormData 或document.querySelector 的事件从隐藏的input 中获取id，但是这存在Typsecript 问题。

您已经可以在创建表单的循环中访问todo，因此我建议您创建一个已经知道id 的函数。

您可以将处理程序更改为像这样的柯里化函数：

const handleOnSubmit = (id: number) => (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(`submitted todo ${id}`);
}

并像这样使用它：

<form onSubmit={handleOnSubmit(todo.id)}>

【讨论】：

谢谢。这种方法是我一直在寻找的。它解决了我遇到的很多问题。