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

在过去的一两个小时里，我一直在调试如何在基于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>

我已作出[半]工作承诺；代码看起来很脆弱，在我的一些尝试中根本没有显示数据输入表单。

我怎么会这么做？

谢谢，