Question

在我的应用程序中，我需要以下内容：

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

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

TypeError：无法将属性'indeterminate'设置为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并应变为选中状态。他们的价值永远不会''，除非是第一次。

这是question.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;

这怎么可能发生，因为如您所见，我已经将intermedia的值设置为true或false？

解决方案

我删除了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)以便首先检查的问题。

无法在React中将属性'indeterminate'设置为null

0 个答案: