ReactJs 设置自定义引导复选框的不确定状态

Posted 2023-03-05

【中文标题】ReactJs 设置自定义引导复选框的不确定状态

【英文标题】：ReactJs set indeterminate state of custom bootstrap checkbox

【发布时间】：2019-01-21 05:08:06

【问题描述】：

我已经制作了这个应该是“三态复选框”的复选框，它不仅将不确定状态用作“视觉值”，还用作“真实”值。如果我只使用标准复选框，它可以正常工作，但如果我使用引导自定义复选框，它就不再起作用了，因为ReactDOM.findDOMNode(this).indeterminate 无法访问该复选框。 所以ReactDOM.findDOMNode(this).indeterminate = true; 不会将不确定设置为true。

这是我的组件：

import React from "react";
import ReactDOM from 'react-dom';
import PropTypes from "prop-types";
import FormsStatic from "../FormsStatic";

class ThreeStateCheckbox extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            value: this.props.value || "0",
            checked: false
        
    
    componentDidMount() 
        if (this.state.value != "0") 
            this.state.value == "1" ? this.setState( checked: true ) : ReactDOM.findDOMNode(this).indeterminate = true;
        
    

    changeCbState() 
        if (this.state.value == "0") 
            this.state.value = "1";
            this.setState( checked: true )
            ReactDOM.findDOMNode(this).indeterminate = false;
        
        else if (this.state.value == "1") 
            this.state.value = "2";
            this.setState( checked: false )
            ReactDOM.findDOMNode(this).indeterminate = true;
        
        else 
            this.state.value = "0";
            this.setState( checked: false )
            ReactDOM.findDOMNode(this).indeterminate = false;
        
        this.props.onChange(this.state.value);
    
    render() 
        const uniqueId = FormsStatic.guid();
        return (
            <div className="custom-control custom-checkbox">
                <input
                    type="checkbox"
                    className="custom-control-input"
                    id="others-" + uniqueId
                    checked=this.state.checked
                    onChange=() => 
                        this.changeCbState();
                    
                />
                <label className="custom-control-label" htmlFor="others-" + uniqueId>
                </label>
            </div>
        );
    


ThreeStateCheckbox.propTypes = 
    className: PropTypes.string,
    value: PropTypes.string,
    onChange: PropTypes.func


export default ThreeStateCheckbox;

checkbox不定的设置方法是什么？

编辑：在changeCbState 中，我可以通过 eventargs (ev.target) 访问复选框，但我在componentDidMount() 中也需要它。仍然不知道如何在那里访问它。

【参考方案1】：

创建一个ref 并使用它来控制 DOM 级别中的不确定性：

constructor(props) 
    //...
    this.checkboxRef = React.createRef();
    //...

然后将 ref 属性添加到您的复选框中。

<input
    type="checkbox"
    ...
    ref=this.checkboxRef
/>

现在您可以使用以下代码来设置不确定状态：

this.checkboxRef.indeterminate = true

【讨论】：

Cannot add property indeterminate, object is not extensible 你的解决方案出现此错误

【参考方案2】：

所以我终于找到了答案： @NonameSL 的答案是正确的，但我无法更改不确定状态，因为 ref 在 reactjs 中被冻结。

我的解决方案是像这样创建一个ref：

this.checkboxRef = React.createRef();

将ref 添加到我的复选框中：

<input
    type="checkbox"
    className="custom-control-input"
    id="others-" + uniqueId
    checked=this.state.checked
    ref=this.checkboxRef
    onChange=() => this.changeCbState()
/>

正如@NonameSL 所说。

但现在我可以像这样访问不确定状态：

ReactDOM.findDOMNode(this.checkboxRef.current).indeterminate = true;

【参考方案3】：

这是一个基于this blog post 的有效解决方案。

IndeterminateCheckbox.tsx

import React,  useEffect, useRef  from 'react';
import FormCheck,  FormCheckProps  from 'react-bootstrap/FormCheck';

export enum IndeterminateCheckboxValue 
    Unchecked,
    Checked,
    Indeterminate,


export interface IndeterminateCheckboxProps extends FormCheckProps 
    value: IndeterminateCheckboxValue;


export default function IndeterminateCheckbox(props: IndeterminateCheckboxProps) 
    const  value, ...otherProps  = props
    const checkRef = useRef<HTMLInputElement>();

    useEffect(() => 
        if (checkRef.current) 
            checkRef.current.checked = value === IndeterminateCheckboxValue.Checked
            checkRef.current.indeterminate = value === IndeterminateCheckboxValue.Indeterminate
        
    )

    return (
        <FormCheck type="checkbox" ref=checkRef ...otherProps />
    )

用法：

<IndeterminateCheckbox value=IndeterminateCheckboxValue.Indeterminate />