How to set default value for radio button in react?

Yashwanth somayajula

I have a input form I get the props and I'm mapping them for input components but for radio buttons I'm not able to set default value upon loading. Any solutions?

updateForm.jsx Now how do I select the default radio button based on employee role admin or representative?

updateForm.jsx

const updateForm = props => {
const { sortedEmployees } = props.location.state;

 const [updateFormData, handleUpdateForm] = useState({
    emp_name: sortedEmployees.emp_name,
    emp_phone: sortedEmployees.emp_phone,
    emp_role: sortedEmployees.emp_role
  });
  const { emp_name, emp_phone, emp_role } = updateFormData;

  const handleEmployeeForm = e => {
    handleUpdateForm({ ...updateFormData, [e.target.name]: e.target.value });
  };

     <form className="w-full" onSubmit={e => handleUpdateEmployee(e)}>
        <label className="label ml-2" htmlFor="Name">
          Name
        </label>
        <input
          className="input ml-2 mb-2"
          type="text"
          name="emp_name"
          value={emp_name}
          id="Name"
          required
          placeholder="Name"
          onChange={e => handleEmployeeForm(e)}
        />
        <label className="label ml-2" htmlFor="Phone">
          Phone Number
        </label>
        <input
          className="input ml-2 mb-2"
          type="text"
          pattern="[0-9]*"
          name="emp_phone"
          value={emp_phone}
          id="Phone"
          required
          placeholder="Phone number"
          onChange={e => handleEmployeeForm(e)}
        />
        <span className="ml-2 mr-4 font-semibold">Role</span>
        <label htmlFor="admin">Admin</label>
        <input
          className="ml-2 mr-2"
          type="radio"
          name="emp_role"
          value="admin"
          id="admin"
          onChange={e => handleEmployeeForm(e)}
        />
        <label htmlFor="representative">Representative</label>
        <input
          className="ml-2 mr-2"
          type="radio"
          name="emp_role"
          value="representative"
          id="representative"
          onChange={e => handleEmployeeForm(e)}
        />
        <button type="submit" value="submit" className="button is-primary ml-2">
          Update
        </button>
      </form>
}
tudor.gergely

You should use checked on your radiobuttton:

<label htmlFor="admin">Admin</label>
<input
  className="ml-2 mr-2"
  type="radio"
  name="emp_role"
  checked={emp_role === 'admin'}
  value="admin"
  id="admin"
  onChange={e => handleEmployeeForm(e)}
/>
<label htmlFor="representative">Representative</label>
<input
  className="ml-2 mr-2"
  type="radio"
  name="emp_role"
  value="representative"
  checked={emp_role === 'representative'}
  id="representative"
  onChange={e => handleEmployeeForm(e)}
/>

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

How to set value of a radio button inside a radio group android

How to set the state when radio button is by default checked?

How to select a radio button by default?

React - How to set default value in react-select

How to set property of radio button to checked

How to show set of Radio buttons based on a previous Radio Button

jQuery: how to set a specific value selection in dropdown when click yes in radio button

How to make Dynamic radio button in React?

how to access radio button selected value in Django

How to get the value of the selected radio button?

How to get value of selected radio button in angularjs

How to get the checked value of radio button in database?

How to set default value in function

How to set default value for variable?

How to set button value in javascript

JavaScript: How to assign a default value if none of the radio buttons are selected

How to make button default on react-bootstrap

How to Show div when a Radio Button is Clicked in React

How do i Get value of selected radio button in angularjs?

how to implement radio button in contact form 7 with different value and label

how to get radio button, checkbox value in csv using ajax and php?

set default reset button

Radio Button will activate if Textbox value is equal to the radio button value

How to set a default value in a dropdown javascript

How to set default value in materialize autocomplete input?

how to set initial(default) value in dropdownButton?

How to set default value of <p:selectOneMenu

How to set default value in laravel collective form

how to set column in GridView to default value?

TOP lista

  1. 1

    R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

  2. 2

    O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

  3. 3

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  4. 4

    R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

  5. 5

    Gerenciar recurso shake de Windows Aero com barra de título personalizado

  6. 6

    Como obter dados API adequados para o aplicativo angular?

  7. 7

    UITextView não está exibindo texto longo

  8. 8

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  9. 9

    Acessando relatório de campanhas na AdMob usando a API do Adsense

  10. 10

    Usando o plug-in Platform.js do Google

  11. 11

    Como posso modificar esse algoritmo de linha de visada para aceitar raios que passam pelos cantos?

  12. 12

    Dependência circular de diálogo personalizado

  13. 13

    Coloque uma caixa de texto HTML em uma imagem em uma posição fixa para site para desktop e celular

  14. 14

    iOS: como adicionar sombra projetada e sombra de traço no UIView?

  15. 15

    Como usar a caixa de diálogo de seleção de nomes com VBA para enviar e-mail para mais de um destinatário?

  16. 16

    Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

  17. 17

    How to create dynamic navigation menu select from database using Codeigniter?

  18. 18

    Converter valores de linha SQL em colunas

  19. 19

    ChartJS, várias linhas no rótulo do gráfico de barras

  20. 20

    用@StyleableRes注释的getStyledAttributes。禁止警告

  21. 21

    não é possível adicionar dependência para com.google.android.gms.tasks.OnSuccessListener

quentelabel

Arquivo