Reactjs list 组件未按预期运行

发布于12月23日

我有一个判断表组件，它应该是一个可重用的组件，不幸的是，它以一种笨拙的方式进行判断，最终不符合需要

import React from 'react'

function CheckBox(props) {
    const $ = (selector) => {
        return document.querySelector(selector)
    }

    return (
        <div className="checkbox-holder">
            <input type="checkbox" name={name} 
                className="hidebx" 
                id={count} 
                value={value} 
        onChange={(e) => props.func(() => {
                    let form = $('#filterForm')
                    let concatArray = []
                    for (let i = 0; i < filterform.length; i++) {
                        if (form[i].checked) concatArray =         [...concatArray, form[i].value]
                    }
                    
                    return [concatArray]
                })}
            />
            <label htmlFor={props.count} className="form-checkbox">{props.value}</label>
        </div>
    )
}

export default CheckBox

推荐答案

您的迭代似乎不正确，但是您可能应该在使用它的值之前对props 进行 struct 化.你的答案应该是这样的.

import React from 'react'

function CheckBox(props) {
const $ = (selector) => {
    return document.querySelector(selector)
}

return (
    const {name, count, value} = props;
    <div className="checkbox-holder">
        <input type="checkbox" name={name} 
            className="hidebx" 
            id={count} 
            value={value} 
    onChange={(e) => props.func(() => {
                let form = $('#filterForm')
                let concatArray = []
                for (let i = 0; i < form.length; i++) {
                    if (form[i].checked) concatArray = [...concatArray, 
 form[i].value]
                }
                
                return [concatArray]
            })}
        />
        <label htmlFor={props.count} className="form-checkbox">. 
{props.value}</label>
    </div>
)

}

导出默认设置复选框