时间戳

首页 > 解决方案 > 方法 onChange 在单选按钮中不起作用

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

问题描述

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

这是我的代码：

           <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>

标签： javascriptreactjsevent-handlingnext.js

解决方案

您必须像这样创建箭头函数：

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

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

注意区别：

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

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

推荐阅读