可观察值更改时复选框不会重新呈现，但其他元素会

如何解决可观察值更改时复选框不会重新呈现，但其他元素会

我正在更改一个 observable 属性，当我更改时，它会按预期重新呈现 html 元素，但复选框除外 - 它们根本不会更改。例如：在下面的代码中，当我单击任一复选框时，我希望另一个复选框和“操作系统值”div 都重新渲染，但只有 div 重新渲染。另一个复选框保持不变。

这是我的可观察类型：

export class SearchFilter
{
    @observable _os?: string;  
    get os() { return this._os;}
    set os(v: string | undefined) {action(()=>{ this._os = v;})()}
}

这是我的渲染代码：

render() {
        const {currentFilter } = this.props;
        const renderCheckBox = (label: JSX.Element,value: boolean | undefined,changeValue: (newValue: boolean) =>  void) =>
        {
            return (<div className={styles.inputItem}>
                <input  
                    type="checkBox"  
                    defaultChecked={value}
                     onChange={(e) => changeValue(e.target.checked)}/>   
                     {label}         
            </div>);
        }

        return <div>
            {renderCheckBox(
                <span>Windows</span>,currentFilter.os === "Windows",(v) =>  currentFilter.os = v ? "Windows" : undefined )}
            {renderCheckBox(
                <span>macOS</span>,currentFilter.os === "macOS",(v) => currentFilter.os = v ? "MacOS" : undefined)}
            <div>OS Value:{currentFilter.os}</div>
        </div>
    }