Question

我已经将此复选框设置为“三态复选框”，它不仅将不确定状态用作“视觉值”，而且还将其用作“真实”值。如果我仅使用标准复选框，则效果很好，但如果使用引导程序自定义复选框，则它不再起作用，因为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;

设置复选框不确定的方式是什么？

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

Answer 1

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

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

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

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

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

this.checkboxRef.indeterminate = true

Answer 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;

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

2 个答案: