反应中的可选输入作为复选框答案

【问题标题】：Selectable Inputs in react as checkboxes反应中的可选输入作为复选框
【发布时间】：2020-11-16 19:50:22
【问题描述】：

我正在尝试制作一行自定义复选框，但似乎无法触发选择更改：

我可以使用正确的默认选项对其进行渲染，但我无法触发选择的任何更改。我希望不使用 react 提供的本机下拉选择并想构建自己的。

const getVariances = async () => {
    /// gets and sets list of variants ///
    setProductVariances(variances)
}
const changeVariance = (e) => {
    const { value } = e.target;
    const newProduct = productVariances.find(o => o.id == value)
    setSelected(newProduct.id)
    setProduct(newProduct)
}

return (
    <div className='product-variances'>
        {productVariances.length ? productVariances.map(variance => (
            <div key={variance.id} className="col-sm-3">
                <div className="quiz_card_area">
                    <input className="quiz_checkbox variance-checkbox" onChange={(e) => changeVariance(e)} type='checkbox' defaultChecked={product.id === variance.id} value={variance.id} />
                    <div className="single_quiz_card">
                        <div className="quiz_card_content">
                            <div className="quiz_card_title">
                                <h3><i className="fa fa-check" aria-hidden="true"></i>{variance.name}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )) : null}
    </div>
)

}

输入标签不允许使用“onClick”来处理操作。使用这些自定义复选框触发“changeVariances”功能的最佳方式是什么？

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

"onChange" 始终适用于输入元素。我还为我的应用程序创建了一个自定义 MultiSelect。如果你 console.log 登录，我相信你会得到价值

const changeVariance = (e) => {
    console.log(e.target.value)
    const { value } = e.target;
    ....
}

【讨论】：

【解决方案2】：

从外观上看，您似乎想要一个受控组件，但您没有提供checked 属性。我建议你像这样添加它：

<input className="quiz_checkbox variance-checkbox" 
  onChange={changeVariance} 
  type='checkbox'
  value={variance.id} 
  checked={selected===variance.id} 
/>

注意 defaultChecked 被删除，它用于不受控制的组件，您需要指定第一个值，但让 DOM 负责进一步的值更新。要指定初始值，您应该在状态中设置它（在您的selected 状态变量中）

另外，您不需要将匿名函数传递给onChange 属性，您可以将其更改为：onChange={changeVariance}，它的工作原理相同。

另外...您真的需要保留两种状态，一种用于选定的方差 id，另一种用于选定的方差对象吗？我建议你只保留一个与整个对象。它会导致这样的结果：


const changeVariance = (e) => {
    const { value } = e.target;
    const newProduct = productVariances.find(o => o.id == value)
    setProduct(newProduct)
}

return (
    <div className='product-variances'>
        {productVariances.length ? productVariances.map(variance => (
            <div key={variance.id} className="col-sm-3">
                <div className="quiz_card_area">
                    <input className="quiz_checkbox variance-checkbox" 
                           onChange={changeVariance} 
                           type='checkbox' 
                           value={variance.id}
                           checked={variance.id === product.id} 
                    />
                    <div className="single_quiz_card">
                        <div className="quiz_card_content">
                            <div className="quiz_card_title">
                                <h3><i className="fa fa-check" aria-hidden="true"></i>{variance.name}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )) : null}
    </div>
)

最后，我认为您需要单选按钮而不是复选框，因为同时检查两个差异似乎没有意义！如果您决定使用单选按钮，请确保在更新 onChange 函数的状态之前检查 e.target.checked，否则它将不起作用，因为选中和未选中的单选都会触发 onChange。

【讨论】：