React-contentEditable предотвращает показ даты ввода - PullRequest
Новая
       10

React-contentEditable предотвращает показ даты ввода

0 голосов
/ 09 февраля 2020

Я знаю, что название странное. Я не мог придумать другого способа описать проблему.

Я использую semanti c -ui-реагировать для компонента <Table />. Внутри одного из <Table.Cell /> членов я поместил компонент <ContentEditable />. Там я выкладываю строку с датой.

Теперь, когда я получаю onFocus, мне кажется, что через l oop дважды. Первое даже происходит и правильно анализирует значение даты, но затем я получаю ошибку диапазона, как показано ниже, значение ячейки кажется пустым. Если я запрещаю повторную визуализацию, входные данные отображаются, но они не являются абсолютно позиционированными и исчезают при повторной визуализации.

Вот 2 сегмента кода, описывающие то, что я пытаюсь сделать: 

  <Table.Cell
                        key={keyName}
                        name={column.colName.replace(' ', '_')}
                        style={{ border: this.props.border }}
                    >
                        <ContentEditable
                            className='dataTable_Footer'
                            html={text + ""}
                            data-column={column.colName}
                            disabled={!column.editable}
                            onFocus={(e) => this.handleDateClick(e, column)}
                        />

                    </Table.Cell>

и функция onFocus: 

handleDateClick(e, column) {
        try {
            var targetCell = e.target;
            e.stopPropagation();
            switch (column.type) {

                case "date":
                    if (this.state.showDate) return;//avoid a second hit with onFocus
                    this.setState({ showDate: true })
                    targetCell.style = 'position:relative';
                    var el = document.createElement("input");
                    el.type = 'date';
                    el.id = "TEST_CALENDAR";
                    el.onchange = () => {
                        var dt = new Date(el.value);
                        dt.setDate(dt.getDate() + 1);
                        targetCell.innerText = this.formatDate(dt);
                        targetCell.focus();
                        // alert(dt.toLocaleDateString())
                        // targetCell.innerText = dt.toLocaleDateString();
                        this.setState({ showDate: false });
                    }
                    //prevents parent from getting click even when opening calendar
                    el.onclick = (e) => { e.stopPropagation(); }
                    var style = `height:100%; position:absolute; top:0px;left:0px;border:none;`;
                    style += 'background-color:white; z-index:100;';
                    el.style = style;

                    //prevent problems with cell contents rerendering
                    if (targetCell.innerText === "") targetCell.innerText = new Date().toLocaleDateString();
                    var txt = targetCell.innerText.split('/');
                    var dt = new Date(txt);
                    var dt1 = new Date(targetCell.innerText);
                    // alert(dt + "\n" + dt1);
                    el.defaultValue = dt.toISOString().split('T')[0];
                    targetCell.appendChild(el);
                    el.focus();
                    // targetCell.innerText = "";
                    break;
                default:
                    return;
            }
        }
        catch (ex) {
            this.setState({ showDate: false });
            console.log(ex);
        }
    }

Перед переключением на обновленные компоненты ввод даты будет отображаться при нажатии на ячейку и будет иметь фокус. Теперь я получаю ошибку RangeError: Недопустимое значение времени в Date.toISOString () в DynamicTable.handleDateClick , когда я фокусируюсь на этом элементе.

...