reactjs - 无法在 React 中设置属性“不确定”的 null

Question

在我的应用程序中，我需要类似的东西：

当问题值为空时，复选框应显示为不确定，否则应选中或不选中。

但问题是，当我更新问题时，它会显示错误：

TypeError：无法将属性“不确定”设置为 null

我的问题对象状态如下：

questions: [{
    id: 1,
    title: 'First Question',
    answers: [
        {
            id: 2,
            title: 'Java',
            value: ''
        },
        {
            id: 3,
            title: 'Python',
            value: ''
        },
        {
            id: 4,
            title: '.NET',
            value: true
        }
    ]
}]

所以这意味着第三个复选框应该被选中，其他两个应该显示为不确定。见下图：

所以当我点击第一个时，它应该被取消选中，再次点击后，它的值应该是 true 并且应该被选中。它们的价值永远不会存在''，除非它可能是第一次。

这是问题.jsx

import React, { Component } from 'react';

class Question extends Component {
    state = {
        questions: []
    }

    componentDidMount() {
        const questions = [{
            id: 1,
            title: 'First Question',
            answers: [
                {
                    id: 2,
                    title: 'Java',
                    value: ''
                },
                {
                    id: 3,
                    title: 'Python',
                    value: ''
                },
                {
                    id: 4,
                    title: '.NET',
                    value: true
                }
            ]
        }, {
            id: 2,
            title: 'Second Question',
            answers: [
                {
                    id: 5,
                    title: 'MongoDB',
                    value: ''
                },
                {
                    id: 6,
                    title: 'MSSQL',
                    value: ''
                },
                {
                    id: 7,
                    title: 'MySQL',
                    value: ''
                }
            ]
        }, {
            id: 3,
            title: 'Third Question',
            answers: [
                {
                    id: 8,
                    title: 'ReactJs',
                    value: ''
                },
                {
                    id: 9,
                    title: 'Angular',
                    value: ''
                },
                {
                    id: 10,
                    title: 'VueJs',
                    value: ''
                }
            ]
        }]
        this.setState({
            questions
        })
    }

    setIndeterminate = (elm, value) => {
        if (value !== '') {
            elm.checked = value;
            elm.indeterminate = false;
        }
        else {
            elm.checkbox = false;
            elm.indeterminate = true;
        }
    }

    handleOnChange = ({ currentTarget: checkbox }) => {
        var questions = [...this.state.questions];
        questions.map(p => {
            p.answers.map(a => {
                if (a.id == checkbox.id) {
                    a.value = (a.value === '') ? false : !a.value;
                    return;
                }
            })
        })

        this.setState({
            questions
        })
    }

    render() {
        const { questions } = this.state
        return (
            <div>
                {questions.map(question =>
                    <div key={question.id} className='question-wrapper'>
                        <div className="row">
                            <h6 className='text-left'>{question.title}</h6>
                        </div>
                        {question.answers.map((answer, i) =>
                            <div key={answer.id} className="form-group row">
                                <div className="form-check">
                                    <input onChange={this.handleOnChange} ref={elm => this.setIndeterminate(elm, answer.value)} value={answer.value} className="form-check-input" type="checkbox" id={answer.id} name={answer.id} />
                                    <label className="form-check-label" htmlFor={answer.id}>
                                        {answer.title}
                                    </label>
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </div>
        );
    }
}

export default Question;

这怎么可能发生，因为您可以看到我已经将中间值设置为真或假？

解决方案

我删除了该setIndeterminate功能，并ref在输入元素中执行此操作：

<input onChange={this.handleOnChange} ref={elm => {
    if (elm) {
        elm.checked = (answer.value !== '') ? answer.value : false;
        elm.indeterminate = (answer.value === '') ? true : false;
    }
}} value={answer.value} className="form-check-input" type="checkbox" id={answer.id} name={answer.id} />

我想问题是我需要先添加它if (elm)来检查它。

标签： reactjshtmlcheckbox