Question

过去一两个小时我一直在调试如何在基于ReactJS的网页上显示一个稍微狡猾的待办事项列表。有六个左右的复选框，用于列出比单片“完整/不完整”更多的状态，我打算在输入TEXTAREA时显示文本。

目前我还没有在文本区域输入文字以显示复选框。

我的直接代码，注释出来的东西是：

    handleClick: function(event)
        {
        var that = this;
        var new_id = that.state.id + 1;
        var child_data = {
            'id': new_id,
            'completed': false,
            'delete': false,
            'hidden': false,
            'unsure': false,
            'you-decide': false,
            'in-progress': false,
            'active': false,
            'background': false,
            'problems': false,
            'description': document.getElementById('description').value
            };
        var fields = ['id', 'completed', 'delete', 'hidden', 'unsure',
          'you-decide', 'in-progress', 'active', 'background', 'problems',
          'children'];
        var previous_keys = Object.keys(that.state);
        var previous_state = that.state;
        for(var index = 0; index < previous_keys.length; ++index)
            {
            if (previous_state.hasOwnProperty(previous_keys[index]))
                {
                var current_key = previous_keys[index];
                var current_value = that.state[current_key];
                /*
                if (current_key === 'description')
                    {
                    that.setState({'description',
                      document.getElementById('description').value});
                    }
                that.setState({current_key: current_value});*/
                }
            }
        previous_state.id = new_id;
        new_child = new TodoItem({id: new_id});
        new_child.setState({descripton:
          document.getElementById('description').value);
        if (typeof previous_state.children !== undefined)
            {
            previous_state.children.push(new_child);
            }
        else
            {
            previous_state.children = [new_child];
            }
        that.setState({id: new_id});
        that.setState({children: previous_state.children});
        },

在TodoItem的render（）函数的其他地方，我有：

        return (
            <tr className="todoItem">
                <TodoField id={"completed-" + that.props.id}
                  field="completed" />
                <TodoField id={"delete-" + that.props.id} field="delete" />
                <TodoField id={"hidden-" + that.props.id} field="hidden" />
                <TodoField id={"unsure-" + that.props.id} field="unsure" />
                <TodoField id={"you-decide-" + that.props.id}
                  field="you-decide" />
                <TodoField id={"in-progress-" + that.props.id}
                  field="in-progress" />
                <TodoField id={"active-" + that.props.id} field="active" />
                <TodoField id={"background-" + that.props.id}
                  field="background" />
                <TodoField id={"problems-" + that.props.id}
                  field="problems" />
                <TodoDescription id={"description-" + that.props.id}
                  id={"description-" + that.props.id}
                  />
                {/*
                <TodoDescription className={descriptionClass}
                  content={that.state.description}
                  />
                */}
            </tr>
        );

使用对象检查器查看建议TodoDescription元素可以作为空字符串存在。应该复制的TEXTAREA是：

                        <textarea className="description"
                        placeholder=" Your next task..."
                        onChange={that.onChange} name="description"
                        id="description"></textarea>

我做了[半]工作承诺;代码看起来很脆弱，并且在我的一些尝试中根本没有显示数据输入表格。

我如何接近这个错误？

谢谢，

Answer 1

一些事情：

子项应该使用render（）方法构造，而不是附加到状态
不要致电setState来构建您初始孩子的状态，而是使用道具和getInitialState而不是
请勿使用document.getElementBy...使用refs
指定key而不是id，不要添加父键

在React中，为什么显示todo列表如此脆弱？

1 个答案: