在 React 中的選擇組件中使用 onChange 事件不起作用

Question

我在一個帶有 InertiaJS 和 React 的 FrontEdn 的 Laravel 項目中，我正在嘗試發送所選選項的值，但由於某種原因它沒有發送任何內容。 我浪費了太多時間試圖解決這個問題，但我不能，我真的很感激任何幫助。

我的表格：

import React from "react"

import { useForm } from "@inertiajs/inertia-react"

import LoadingButton from "@/base/elements/LoadingButton"
import TextInput from "@/base/forms/fields/TextInput"
import Select from "@/base/forms/fields/Select"

const UserFormData = ({ customer }) => {
  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: '',
  });
  function handleSubmit(e) { 
    e.preventDefault()
    post("/change-language-profile")
  }
  return (
    <section>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <legend>Contact data</legend>
            <div className="fields-wrapper">
              <TextInput
                label="Fullname"
                name="fullname"
                type="text"
                value={customer.fullname}
                readOnly
              />
              <TextInput
                label="Email"
                name="email"
                type="email"
                value={customer.email}
                readOnly
              />
              <TextInput
                label="Phone"
                name="phone"
                type="phone"
                value="+34 654 321 000"
                readOnly
              />
              <Select
                label="Language"
                name="language"
                onChange={e => setData("language", e.target.value)}
              />
              <LoadingButton
                type="submit"
                loading={processing}
                className="btn-indigo"
              >
                Change Language
              </LoadingButton>
              </div>
          </fieldset>
        </form>
    </section>
  )
}
export default UserFormData

我的選擇組件：

import React, {useState} from "react"

const Select = ({name, value, onChange}) => {
    // const handleChange = event => {
    //     this.setState({value: event.target.value})
    // }
    const [languageChoice, setLanguageChoice] = useState()
    console.log(onChange)
    console.log(value) // This shows me undefined value

    return (
        <div className="field-group">
            <select name={name} id="customer-language" onChange={e => setLanguageChoice(e.target.value)} value={languageChoice}>
                <option value="en" defaultValue>English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select

我的控制器中有一個“dd()”來檢查值是否已通過，但它只收到電子郵件，知道我遺漏了什么嗎？

Answer 1

我已經更新了你的代碼，請你試試這個。

import React, {useState} from "react"

import { useForm } from "@inertiajs/inertia-react"

import LoadingButton from "@/base/elements/LoadingButton"
import TextInput from "@/base/forms/fields/TextInput"
import Select from "@/base/forms/fields/Select"

const UserFormData = ({ customer }) => {
  const [languageChoice, setLanguageChoice] = useState("en")
  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: languageChoice,
  });
  function handleSubmit(e) { 
    e.preventDefault()
    post("/change-language-profile")
  }
  return (
    <section>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <legend>Contact data</legend>
            <div className="fields-wrapper">
              <TextInput
                label="Fullname"
                name="fullname"
                type="text"
                value={customer.fullname}
                readOnly
              />
              <TextInput
                label="Email"
                name="email"
                type="email"
                value={customer.email}
                readOnly
              />
              <TextInput
                label="Phone"
                name="phone"
                type="phone"
                value="+34 654 321 000"
                readOnly
              />
              <Select
                label="Language"
                name="language"
                setLanguageChoice={setLanguageChoice}
                languageChoice={languageChoice}
              />
              <LoadingButton
                type="submit"
                loading={processing}
                className="btn-indigo"
              >
                Change Language
              </LoadingButton>
              </div>
          </fieldset>
        </form>
    </section>
  )
}
export default UserFormData

選擇組件：

import React, {useState} from "react"

const Select = ({name, value, setLanguageChoice, languageChoice}) => {
    // const handleChange = event => {
    //     this.setState({value: event.target.value})
    // }
    console.log(languageChoice) // This shows me undefined value

    return (
        <div className="field-group">
            <select name={name} id="customer-language" onChange={e =>  setLanguageChoice(e.target.value)} value={languageChoice}>
                <option value="en" defaultValue>English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select

Answer 2

我解決了我的問題，問題是我沒有意識到我已經在使用類似於 Hook 的 Inertia 的“助手”，更具體地說，就像 useState()。

所以問題是我必須將值傳遞給我的組件 Select 和onCgange ，該函數將更新我的組件的值。

所以在表格中我需要替換它：

  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: '',
  });

對此：

  const { data, setData, errors, post, processing } = useForm({
    email: customer.email,
    language: 'en',
  });

在我的組件上正確傳遞值和 onChange：

（后）

      <Select
        label="Language"
        name="language"
        onChange={e => setData("language", e.target.value)}
      />

（前）

      <Select
        label="Language"
        name="language"
        value={data.language}
        onChange={e => setData("language", e.target.value)}
      />

在我的 Select 組件上將是這樣的：

import React from "react"

const Select = ({name, value, onChange}) => {

    return (
        <div className="field-group">
            <select name={name} id="customer-language" onChange={onChange} value={value}>
                <option value="en" defaultValue>English</option>
                <option value="es">Spanish</option>
            </select>
        </div>
    )
}

export default Select