如何從 reactjs 中的 select-option 傳遞 key:value onChange？

Question

我遵循本教程並嘗試對其進行一些修改。

我有這段代碼 addRequestForm.js

import { BiPlus } from 'react-icons/bi'
import { useMutation, useQueryClient } from "react-query"
import { addRequest, getRequests } from "../../lib/helper"
import Bug from "./bugRequest"
import Success from "./successRequest"


export default function AddRequestForm({ formData, setFormData }) {

    const queryClient = useQueryClient()
    const addMutation = useMutation(addRequest, {
        onSuccess: () => {
            queryClient.prefetchQuery('requests', getRequests)
        }
    })

    const handleSubmit = (e) => {
        e.preventDefault();
        if (Object.keys(formData).length == 0) return console.log("Don't have Form Data");
        let { sector, contact_name } = formData;

        const model = {
            sector, contact_name
        }

        addMutation.mutate(model)
    }

    if (addMutation.isLoading) return <div>Loading!</div>
    if (addMutation.isError) return <Bug message={addMutation.error.message}></Bug>
    if (addMutation.isSuccess) return <Success message={"Added Successfully"}></Success>


    return (
        <form className="grid lg:grid-cols-2 w-4/6 gap-4 md:px-4 md:mx-auto" onSubmit={handleSubmit}>
            
            <div className="input-type">
                <label htmlFor="sector" className="block text-sm font-medium text-gray-700">
                    Sector
                </label>
                <select
                    id="sector"
                    name="sector"
                    autoComplete="sector-name"
                    className="border w-full px-5 py-3 focus:outline-none rounded-md"
                    
                    onChange={(e) => setFormData({ [e.target.name]: e.target.value })}
               
                >
                    <option value="North">North</option>
                    <option value="South">South</option>
                    <option value="West">West</option>
                    <option value="East">East</option>
                    {/*  */}
                </select>
            </div>


            <div className="form-control input-type">
                <label className="input-group">
                    <span>Contact Name</span>
                    <input type="text" onChange={setFormData} name="contact_name" placeholder="Contact Name Here..“ className="w-full input input-bordered" />
                </label>
            </div>



            <button type="submit" className="flex justify-center text-md w-2/6 bg-green-500 text-white px-4 py-2 border rounded-md hover:bg-gray-50 hover:border-green-500 hover:text-green-500">
                Add <span className="px-1"><BiPlus size={24}></BiPlus></span>
            </button>

        </form >
    )


}

對於 name=“contact_name” 已經成功插入數據庫（mongodb + mongoose）。 但是，我仍然很困惑，如何對選擇選項做同樣的事情？

已經嘗試過這些：

onChange={(e) => setFormData({ e.target.name: e.target.value })}
onChange={(e) => setFormData({ sector.name: e.target.value })}
onChange={(e) => setFormData({ [e.target.name][0]: e.target.value })}

出現語法錯誤：意外的標記，應為“，”。 當我安慰這些時，我認為這是正確的值（結果：“扇區：我的名字”）。

onChange={(e) => setFormData({ sector: e.target.value })}
onChange={(e) => setFormData({ [e.target.name]: e.target.value })}

沒有插入數據庫。

怎么寫才正確？ 我正在使用 nextjs（我認為 reactjs 也一樣，對吧？）+ @reduxjs/toolkit 1.9.1。

如果需要，這里是 reducer.js：

import UpdateRequestForm from "./updateRequestForm";
import AddRequestForm from "./addRequestForm";
import { useSelector } from "react-redux";
import { useReducer } from "react";

const formReducer = (state, event) => {
    return {
        ...state,
        [event.target?.name]: event.target?.value
    }
}

export default function FormRequest() {

    const [formData, setFormData] = useReducer(formReducer, {})
    const formId = useSelector((state) => state.app.client.formId)

    return (
        <div className="container mx-auto py-5">
            {formId ? UpdateRequestForm({ formId, formData, setFormData }) : AddRequestForm({ formData, setFormData })}
        </div>
    )
}

Answer 1

嘗試這個

        onChange = {(e) => { 
                          let obj = {} ; 
                          obj[e.target.name] = e.target.value;
                          setFormData(obj);
                
                       } 
                    }

Answer 2

我並不完全遵循你的減速器用例，但你可以用一個簡單的 handleChange function 替換它，如下所示。 請注意，調用setFormData(//newData)將完全清除其中的內容，因此我們首先傳播原始 state 並根據key更改值。

State 和 handleChange：

  const [formData, setFormData] = React.useState({
    sector: "North",
    contact_name: ""
  });


const handleChange = ({ target }) => {
  // Deconstruct the target
  // Deconstruct the name and value from the target
  const { name, value } = target;
  // Set the state
  setFormData((previousState) => ({
    ...previousState,
    [name]: value,
  }));
};

用法：

  <select
    placeholder="Select a sector"
    name="sector"
    value={formData.sector}
    onChange={handleChange}
  >
    <option value="North">North</option>
    <option value="South">South</option>
    <option value="West">West</option>
    <option value="East">East</option>
  </select>

  <input
    value={formData.contact_name}
    placeholder="Contact Name"
    name="contact_name"
    onChange={handleChange}
  />

一個codesandbox： https://codesandbox.io/s/interesting-kilby-emcyl4?file=/src/App.js:461-615

另請注意，您需要為輸入元素指定一個名稱。 在示例中，名稱設置為扇區。 由於名稱值將用於指示 state object 中的哪個鍵必須更新。

控制輸入字段是一種很好的做法。 因此，將輸入值設置為 state 即可完成此操作。 唯一要記住的是您需要一個默認值 state。如果您想看一下，我已將其全部添加到 codesandbox 中。

Answer 3

就我而言，只需使用以下語法：

…
 value={formData.sector}
 onChange={setFormData}
…

結案。