输入单选按钮的 defaultChecked 属性防止触发 onClick 功能

Question

<section key={i}>

    <input 
        type='radio'

        key={attribute.name + item.id}
        id={attribute.name + item.id}
        name={attribute.name}
        value={item.value}

        defaultChecked={i === 0}

        onClick={(event) => inputClick(attribute, event)}
    />
 
    <label 
        htmlFor={attribute.name + item.id}
    >
        {
            item.value
        }
    </label>
</section>

上面的代码或多或少是 .map() 函数应该在我的 React.js 应用程序中 return，在将产品添加到购物车之前创建用于自定义产品的输入单选按钮状态。我所做的只是删除了一些类等 CSS 等目的

理想情况下，这里应该发生的是...

首次呈现产品页面时，默认情况下应选中 return 由 .map() 编辑的第一个输入单选按钮。这要归功于“defaultChecked”属性。这里没问题。
在我点击不同的输入单选按钮（不是“defaultChecked”单选按钮）后，选中的输入应该改变，所有其他输入应该保持未选中状态。据我了解，具有相同 'name' 属性的输入单选按钮会自动执行此操作。
单击输入单选按钮时，应触发“onClick”函数。这是代码无法正常运行的地方。

问题是，当我的页面第一次呈现并且我单击输入单选按钮（“defaultChecked”除外）时，“onClick”功能不会触发。它仅在我单击一次不同的输入然后再单击另一个时触发。

A.k.a。它在第二次点击时触发。第二次单击后，它会按预期工作 - 每次打开不同的输入单选按钮时 selected/clicked - 功能触发，但不是第一次。

我在“onClick”“inputClick(attribute, event)”函数的末尾用 console.log("I am triggered") 测试了这个，只有在第二次点击时控制台才会记录“我被触发了。

我通过删除“defaultChecked”属性解决了这个问题。我认为这个问题可能与这样一个事实有关，即“onClick”功能只能在一个输入获得“checked”属性而另一个输入失去它时触发，但“defaultChecked”属性不算作输入“完全检查”或类似的东西。

我可以就此打住，但我正在从事的项目要求我在第一页呈现上有一个默认选中的输入单选按钮。所以，我不能只删除“defaultChecked”属性并结束它。

关于可能导致此行为的原因有什么想法吗？

更新 1

以下是inputclick()函数的主体：

    //* Handle input selection
    const inputClick = (attribute, event) => {

        //* Parse state
        let state = JSON.parse(JSON.stringify(itemState));

        //* Get all the required values from the clicked input
        const attributeId = attribute.id;
        const itemTargetValue = event.target.value;

        //* Check if the attribute is in state
        const attributeIs = state.some(item => item.id === attributeId);

        //* If the attribute does not exsist - add the attribute to state
        if(attributeIs === false) {

            const obj = {
                id: attributeId,
                selectedItem: itemTargetValue
            };

            state.push(obj);

            return setitemState(state);
        }

        //* If the attribute id already exsists in state
        if(attributeIs) {
            //* Find the index of the attribute in question
                const attributeIndex = state.map(object => object.id).indexOf(attributeId);
                const attributeInQuestion = state[attributeIndex].selectedItem;

            //* If the attribute's item's id is the same as the seelected input - do nothing
            if(attributeInQuestion === itemTargetValue) {
                return
            }
            //* If the attribute's item's id is not the same - change it to the new value
            if(attributeInQuestion !== itemTargetValue) {

                state[attributeIndex].selectedItem = itemTargetValue;

                console.log(state);

                return setitemState(state);
            }
        }
    };

Answer 1

这是解决问题的工作代码。

是的，有一些精简，例如代码缩短等。但是，解决问题的不同之处在于...

我最初在问题中发布的代码是有效的。意思是，它正在触发 inputClick() 函数并更改选择的输入，问题是...

...中的 defaultChecked 逻辑阻止将所选输入呈现为所选输入 a.k.a。更改其 CSS 样式。

下面是新的 onClick() 函数。

//* Handle input selection
    const inputClick = (product, attribute, event) => {
      let newCart = JSON.parse(JSON.stringify(cartState));

      const productId = product.id;
      const attributeId = attribute.id;
      const itemTargetValue = event.target.value;

      //* Find the product in cart state */
      const productIndex = newCart.map((object) => object.id).indexOf(productId);

      //* Find the attribute by id in question */
      const attributeIndex = newCart[productIndex].selectedAttributes.map(object => object.id).indexOf(attributeId);

      //* Change the products selected attribute item */
      newCart[productIndex].selectedAttributes[attributeIndex].selectedItem = itemTargetValue;

      setcartState(newCart);
    };

下面是现在“内部”的样子。

    <input 
        type='radio'

        key={product.id + attribute.name + item.id}
        id={product.id + attribute.name + item.id}
        name={product.id + attribute.name}
        value={item.value}

        defaultChecked={product.selectedAttributes[selectedId].selectedItem === item.value}

        onChange={(event) => inputClick(product, attribute, event)}
      >
    </input>

输入单选按钮的 defaultChecked 属性防止触发 onClick 功能

Input radio button's defaultChecked attribute prevents onClick function from being triggered

html

javascript

events

dom

reactjs

更新 1