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

如何解决方法 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>

解决方法

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

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

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

注意区别：

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

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

,

你需要这样做：

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

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