在 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