javascript - 如何处理多个输入字段中的更改并使用 axios 将数据发送到 api？

Question

我正在尝试处理多个输入文本字段中的更改并将值发送到 API 这是我尝试过的

const [state, setState] = useState({
    Value_A:'', 
    Value_B:'', 
    Value_c:'', 
    Value_D:'', 
    Value_e:''})

这里的handleChange函数

function handleChange(evt) {
    const value = evt.target.value;
    setState({
        ...state,
        [evt.target.name]:value
    })
}

那么我该怎么做才能在函数 handleSubmit() 中获取这些值

const handleSubmit = (e) => {
    const a = {
    // How to get those values here?

谢谢！

Answer 1

您在这里尝试的概念在 reactjs 中被称为Controlled Component，在每次输入更改时，我们都会更新关联状态，在表单提交时，我们会获得更新的状态。在你的情况下，你会得到它：

const handleSubmit = (e) => {
    e.preventDefault();
    let formValues = {...state};  // spread operator is used to clone the data
    // Your API call goes here
}

受控组件参考

Answer 2

尝试这个。

const handleSubmit = (e) => {
    const a = {...state};
    // Your API call goes here
}