Входное радио React не будет обновляться проверено

#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/…