[英]onChange event use in select component in React dosen't works
I'm in a Laravel project with InertiaJS and React fro the FrontEdn and I'm trying to send the value of the selected option but for some reason it dosent send anything.我在一个带有 InertiaJS 和 React 的 FrontEdn 的 Laravel 项目中,我正在尝试发送所选选项的值,但由于某种原因它没有发送任何内容。 I lost too much time trying to resolve this but I can't, I really appreciate any help.
我浪费了太多时间试图解决这个问题,但我不能,我真的很感激任何帮助。
My Form:我的表格:
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
My Select component:我的选择组件:
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
I have a "dd()" in my controller to check if the values is passed but it only recieve the email, any idea of what I'm missing?.我的控制器中有一个“dd()”来检查值是否已通过,但它只收到电子邮件,知道我遗漏了什么吗?
I have updated your code, would you please try this.我已经更新了你的代码,请你试试这个。
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
Select component:选择组件:
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
I solve my problem, the thing is that I didn't realize that I was alredy using a "helper" of Inertia that acts like a Hook , to be more specific like the useState().我解决了我的问题,问题是我没有意识到我已经在使用类似于 Hook 的 Inertia 的“助手”,更具体地说,就像 useState()。
So the thing is that I have to pass the value to my component Select and on the onCgange , the function that will update the value of my component.所以问题是我必须将值传递给我的组件 Select 和onCgange ,该函数将更新我的组件的值。
So in the Form I need to replace this:所以在表格中我需要替换它:
const { data, setData, errors, post, processing } = useForm({
email: customer.email,
language: '',
});
to this :对此:
const { data, setData, errors, post, processing } = useForm({
email: customer.email,
language: 'en',
});
pass correctly the value and the onChange on my component:在我的组件上正确传递值和 onChange:
(after) (后)
<Select
label="Language"
name="language"
onChange={e => setData("language", e.target.value)}
/>
(before) (前)
<Select
label="Language"
name="language"
value={data.language}
onChange={e => setData("language", e.target.value)}
/>
And on my Select component will be like this:在我的 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.