#reactjs #forms #state
Вопрос:
Моя проблема:
Я пытаюсь создать простое радио с двумя вариантами, когда я устанавливаю состояние поля, проверенное значение должно обновляться, но этого не происходит. Условие, используемое в проверено внутри входа, кажется нормальным, но входы не будут чередоваться
Мой код:
import { FormEvent, useState } from "react"
function CadastroGeral(){
const [form, setForm] = useState({
Tipo: "Comércio",
RazaoSocial: "",
NomeFantasia: ""
})
function handleSubmit(event: FormEvent){
event.preventDefault()
console.log(form)
}
async function handleChangeTipo(event: any){
await setForm(oldForm => {
oldForm.Tipo = event.target.value
return oldForm
})
console.log(form) //the data comes out updated
}
//other handlers here, all of them work just fine
return(
<div className="wrapper-page">
<form onSubmit={handleSubmit} className="content-container form-agendamento">
<div className="w-10 form-group">
<h1>Selecione seu tipo</h1>
<span>
<input type="radio" value="Comércio" checked={form.Tipo === 'Comércio'} onChange={handleChangeTipo}/>
Comércio
</span>
<span>
<input type="radio" value="Indústria" checked={form.Tipo === 'Indústria'} onChange={handleChangeTipo}/>
Indústria
</span>
</div>
<div className="w-10">
<input type="text" className="w-5" placeholder="Razão Social" onChange={handleChangeRazaoSocial}/>
<input type="text" className="w-5" placeholder="Nome Fantasia" onChange={handleChangeNomeFantasia}/>
</div>
<button className="btn btn-primary" type="submit">
Enviar
</button>
</form>
</div>
)
}
export default CadastroGeral
Ответ №1:
setState
нужно вернуть новое значение, подобное этому
setForm((oldForm) => {
return { ...oldForm, Tipo: event.target.value };
});
Комментарии:
1. Большое спасибо, не могли бы вы объяснить, что означает»…», или отправить ссылку?
2. Это операторы распространения. Вы можете увидеть подробности здесь: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…