方法 onChange 在单选按钮中不起作用

Question

我有一个带有单选按钮的表单，当项目 selected 更改时必须执行某些操作，但它只在页面加载时发生，但在我 select 其他项目

这是我的代码：

           <div key={item} className="lg:w-1/2">
                <label
                  className="flex items-center mx-6"
                  htmlFor={item.option_image.alt}
                >
                  <input
                    className="w-5 h-5 mr-4"
                    type="radio"
                    id={item.option_image.alt}
                    value={item.option_image.alt}
                    name={slice.primary.title}
                    checked={item.option_image.alt === category}
                    onChange={console.log(item.option_image.alt)}
                    required
                  />
                  <Image
                    src={item.option_image.url}
                    width={item.option_image.dimensions.width}
                    height={item.option_image.dimensions.height}
                    alt={item.option_image.alt}
                  />
                  <p className="flex-1 my-auto ml-2 text-lg text-white 2xl:mr-4">
                    {item.option_label}
                  </p>
                </label>
              </div>

Answer 1

你需要这样做：

                onChange={() => console.log(item.option_image.alt)}

如果您不这样做，它将运行在页面第一次加载时显示控制台，而不是在单击收音机时。

Answer 2

你必须这样创建一个箭头函数：

onChange={()=>console.log(item.option_image.alt)}

您现在所做的只是访问 onChange 方法。

注意区别：

使用 onChange={(e) => onChange(e)}，您实质上是在创建一个在每次渲染期间调用 onChange 方法的新函数。

使用 onChange={onChange}，您将直接访问 onChange 方法。

方法 onChange 在单选按钮中不起作用

method onChange not working in radio button

javascript

event-handling

reactjs

next.js