取消选中React应用程序中未选中儿童元素的父复选框

Question

我有一张选择全部检查的支票，以检查所有/取消选中所有子元素，但是当我取消选中任何子元素时，我也想取消选中父元的复选框。 当我选择全部选择时，我可以检查并取消选中，但是当没有选中任何子元素时，都无法实现副主席。

export const List = props => {

    const{startOver} = props;

    const onCheckAllcheckbox = (event) => {
        let _items = props.items.map(item => {
            item.isChecked = event.target.checked
            return item;
        });
        props.setItems(_items);
    }

    const handleCheckChieldElement = (event) => {
        let _items = props.items.map(item => {
            if (item.id == event.target.value) {
                item.isChecked = event.target.checked
            }
            return item;
        })
        props.setItems(_items);
    }
return (
        <Box>
      
            {props.action && (
                <Box horizontal align="center">
              
                 <input type="checkbox"
                                onChange={onCheckAllcheckbox}
                                defaultChecked={true}
                                style={{width: '20px', height: '15px'}}  />
                    <Text>SELECT ALL</Text>
                </Box>
            )}
            <div style={{overflow : 'auto', height : '200px', width : '900'}}>
            <Box type="flat">
                {props.items.map((item, index) => (
                   
                    <Box key={index} horizontal align="center" style={{ margin: '.3rem 0' }}>
                        {props.action && (
                            <input type="checkbox"
                                onChange={handleCheckChieldElement}
                                checked={item.isChecked}
                                value={item.id}
                                style={{width: '20px', height: '15px'}} />
                        )}
                        {props.itemTemplate && props.itemTemplate(item) || (
                            <Text>{item.text}</Text>
                        )}
                    </Box>
                   
                ))}
                
            </Box>
            </div>
        </Box>
    )
}

Answer 1

添加检查属性到选择所有输入而不是传递defaultchecked属性。

<Box horizontal align="center">
      <input type="checkbox"
        onChange={onCheckAllcheckbox}
        checked={props.items.every((item) => item.isChecked)}
        style={{width: '20px', height: '15px'}}  />
      <Text>SELECT ALL</Text>
</Box>