Как получить значение radio кнопки и менять его в state

Question

Как получить значение radio кнопки и менять его в state

Рейтинг: 0Ответов: 1Опубликовано: 12.08.2023

Не обновляется checked. Он остается таким же, что и в state.


export default () => {
    const [value, setValue] = useState([
        {title: "test1", active: true},
        {title: "test2", active: false},
        {title: "test3", active: false},
    ]);

    const func = title => {
       value.forEach(e => e.title === title ? e.active=true : e.active = false);
       setValue(value);
    }

    return (
         <>
            {value.map(el => <input type="radio" value={el.title} checked={el.active} onClick={func(title)}>)}
         </>
    );

}

Понятно, что нужно использовать useEffect(), но я не могу понять как именно. Пробовал даже так:

useEffect(() => {
        value.forEach(e => {
            ...
        })
    }, [])

Изначально я вообще хотел сделать, чтобы были <button />. При клике, на одну из них, она как radio кнопка стала активной, а остальные нет. Но проблема была аналогичной.

javascript reactjs useeffect usestate radio

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

useEffect вам вообще не нужен для переключения. Так же, метод forEach не возвращает ничего и не меняет элементы массива, хотя в вашем случае, каждый элемент массива это объект и вы его мутируете.

Так как сам массив не меняется, то и рендера у вас не будет.

  const func = title => {
    const newValue = value.map(item => {
      item.active = item.title === title.target.value;
      return it;
    });
    setValue(newValue);
  }

Полный код компонента с функцией, которая берет гарантированно текущее состояние переменной value

import React, { useState } from "react";

const RadioButtons = () => {
  const [value, setValue] = useState([
    {title: "test1", active: true},
    {title: "test2", active: false},
    {title: "test3", active: false},
  ]);

  const func = title => {
    setValue(v => v.map(it => {
      it.active = it.title === title.target.value;
      return it;
    }));
  }

  return (
    value.map(item =>
      (
        <input
          key={item.title}
          type={'radio'}
          value={item.title}
          checked={item.active}
          onClick={func}
        />
      )
    )
  )
}

export { RadioButtons }

Как получить значение radio кнопки и менять его в state

Ответы