方法onChange不在单选按钮中工作

Question

我有一个带有单选按钮的表单，当项目选择更改时，它必须做一些事情，但它只在页面加载时发生，而当我选择其他项时不发生。

这是我的密码：

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

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

注意不同之处：

使用onChange={(e) => onChange(e)}，您实际上正在创建一个新函数，该函数在每次呈现时调用onChange方法。

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

Answer 2

你需要这样做：

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

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