Как работать с confirm в react?

Question

[sergemin]

Alert, prompt работают нормально, а confirm ошибку выдает? В чем особенность?

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            todos: [
                {
                    title: 'First',
                    task: 'Wash car',
                    isDone: false,
                },
                {
                    title: 'Second',
                    task: 'Go to store',
                    isDone: false,
                }
            ]
        };
        this.deleteItem = this.deleteItem.bind(this);
    }
    deleteItem(event) {
        //Here I want to add confirm like that 
        // let conf = confirm('sure?'); if(conf) ...
        let number = event.target.parentNode.getAttribute('data-key');
        let newTodo = this.state.todos.slice();
        newTodo.splice(number, 1);
        this.setState({
            todos: newTodo,
        })
    }
    render() {
        return (
                <div>
                    <div className="header-app">
                        <h1>My ToDo app with React</h1>
                        <button onClick={this.showAddItem}>+</button>
                        <div className={(!this.state.isHidden ? 'hide_menu' : '') + " header-block"}>
                            <input id="title" type="text" placeholder="title"
                                   value={this.state.title}
                                   onChange={this.valueTitle}/>
                            <input id='task' type="text" placeholder="task"
                                   value={this.state.task}
                                   onChange={this.valueText}/>
                            <input id='submit' type='submit' value="Add"
                                    onClick={this.addItem}
                            />
                        </div>
                     </div>
                    <div className="body-app">
                        <div className="block-todo">
                            <div>
                                {this.state.todos.map((item, index) =>
                                    <div className={item.isDone ? 'opacity_small' : '' + ' itemTodo'} key={index} data-key={index}>
                                        <Title value={item.title} />
                                        <Task value={item.task}/>
                                        <Done onClick={this.isChecked} />
                                        <Remove onClick={this.deleteItem}/>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="footer-app">
                        Footer
                    </div>
            </div>
        )
    }
}

Comments

[Максим]

sergemin пример приведите. confirm работает как и везде, ему просто не с чего работать иначе.

[sergemin]

Максим, привел пример в описании

[Максим]

sergemin, какая ошибка у вас возникает? по синтаксису (закомментированному confirm'y) все ок. Написано нормально, должно всплыть окно подтверждения.

[sergemin]

Максим, странно. Сейчас запустил свой код здесь и работает конфёрм. А дома выдает ошибку. Завтра утром попробую еще раз и отпишу по поводу ошибки. Спасибо за помощь!

[sergemin]

Максим,

deleteItem(event) {
        const conf = confirm(`Are you sure?`); //72
        let newTodo = this.state.todos.slice();
        if(conf) {
            newTodo = newTodo.splice(newTodo.indexOf(index), 1); //75
            this.setState({
                todos: newTodo,
            })
        }
    }


Failed to compile
./src/App.js
  Line 72:  Unexpected use of 'confirm'  no-restricted-globals
  Line 75:  'index' is not defined       no-undef

[Максим]

sergemin, вам не кажется что все написано?) в строке 75 - откуда у вас index? нигде внутри этой функции его нет, поэтому все и падает.
А по поводу строки 72 - no-restricted-globals, раз у вас есть такое правило, используйте window.confirm вместо confirm.

Answer 1

[Максим]

Итого (из комментариев) у топик-стартера настроен eslint и + ошибка в коде.
Решение:
1) использовать window.confirm вместо confirm
2) передавать index (сейчас он у вас undefined)

Comments

[sergemin]

Благодарю за очередное просветление!

Answer 2

[Ваге]

взгляните сюда fiddle.вроде бы все нормально работает

deleteItem(event) {
    const conf = confirm(`Are you sure?`);
    let number = parseFloat(event.target.parentNode.getAttribute("data-key"));
    let newTodos = this.state.todos;
    if (conf) {
      newTodos = newTodos.splice(newTodos.indexOf(number), 1);
      this.setState({ todos: newTodos });
    } else {
      alert(`ok we won't delete it `);
    }
  }

а почему бы не падать index прямо из .map().было бы намного правильнее чем искать в атрибутах

React не рекомендуем вам хранить данные в DOM атрибутов. Даже если у вас есть, атрибуты данных, вероятно, являются более оптимальным подходом, но в большинстве случаев данные должны храниться в состояние компонента реагировать или внешние хранилища.

Comments

[sergemin]

Я пока не могу понять, что вы имеете ввиду

{this.state.todos.map((item, index) =>
       <div key={index} data-key={index}>

В этом участке кода я ведь и так передаю index в map'e
или что вы хотели сказать?

[Ваге]

sergemin, чему вам data-key? попробуйте так.

<div>
  {this.state.todos.map((item, index) => (
    <div
      className={item.isDone ? "opacity_small" : "" + " itemTodo"}
      key={index}
    >
      <h1>{item.title}</h1>
      <p>item.task</p>
      <button onClick={this.isChecked}>Done</button>
      <button onClick={() => this.deleteItem(index)}>remove</button>
    </div>
  ))}
</div>;

я обновил fiddle

deleteItem(index) {
    const conf = confirm(`Are you sure?`);
    let newTodos = this.state.todos;
    if (conf) {
      newTodos = newTodos.splice(newTodos.indexOf(index), 1);
      this.setState({ todos: newTodos });
    } else {
      alert(`ok we won't delete it `);
    }
  }

[sergemin]

Ваге, хороший совет, благодарю!

[sergemin]

Ваге,

deleteItem(event) {
        const conf = confirm(`Are you sure?`); //72
        let newTodo = this.state.todos.slice();
        if(conf) {
            newTodo = newTodo.splice(newTodo.indexOf(index), 1); //75
            this.setState({
                todos: newTodo,
            })
        }
    }


Failed to compile
./src/App.js
  Line 72:  Unexpected use of 'confirm'  no-restricted-globals
  Line 75:  'index' is not defined       no-undef

[Ваге]

сменить event на индекс.
Line 72: Unexpected use of 'confirm' no-restricted-globals
это наверняка ошибка из eslint

добавьте confirm в no-restricted-globals

{
    "rules": {
        "no-restricted-globals": ["confirm"]
    }
}