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

【问题标题】：ReactJs set indeterminate state of custom bootstrap checkboxReactJs 设置自定义引导复选框的不确定状态
【发布时间】：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() 中也需要它。仍然不知道如何在那里访问它。

【问题讨论】：

标签： javascript reactjs checkbox bootstrap-4

【解决方案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} />

【讨论】：