Ошибка при использовании внешней функции для управления ссылкой или состоянием - PullRequest
Новая
       17

Ошибка при использовании внешней функции для управления ссылкой или состоянием

0 голосов
/ 09 мая 2019

Я пишу базовое приложение ReactJS для создания Todolist.
Проект находится здесь: https://github.com/pdhung197/ReactSpl
В компоненте "TodoTable" у меня есть какая-то строка, в каждой строке есть кнопка "Редактировать", когда мышь наводится.
JSX: 

<button data-todoid={"todoitem" + data.id} className="btn btn-warning rounded-0 mr-3 todolist_btngroupupdate" onClick={(e) => focusToUpdate(data.todo, data.id)}>Sửa</button>

При нажатии на кнопку «Изменить» будет изменено состояние компонента «TodoAdd» и фокус на входе внутри «TodoAdd».
Конструктор TodoAdd: 

constructor(props) {
        super(props);
        this.state = {
            activity: 'addnew',
            inputtext: '',
            idtoupdate: null
        };
        focusToUpdate = focusToUpdate.bind(this);
        this.textInput = React.createRef();
    }

textInput Ref в JSX: 

<input
 type="text" name="" id="todolist__input"
 className="todolist__input form-control d-inline-block rounded-0"
 placeholder="Nhập việc cần làm"
 onChange={(e) => this.typeOnInput(e.target.value)}
 value={this.state.inputtext}
 ref={this.textInput}
/>

В настоящее время я создаю внешнюю функцию для передачи события из компонента "TodoTable" в компонент "TodoAdd" (оба являются дочерними для компонента TodoList).При нажатии на кнопку «Sửa» текст элемента компонента TodoTable перейдет к вводу текста в компоненте TodoAdd, и текст ввода будет сфокусирован.Обычно это работает, без проблем.
Теперь я переключаюсь на другой маршрут, MusicPlayer или Context route ... и снова переключаюсь на TodoList, если нажимаю кнопку "Sửa" ... BOOMMMM ... Ошибка:

TypeError: Cannot read property 'focus' of null
TodoAdd.focusToUpdate
E:/Extenal Code/Hoc JS/ReactJS-iViettech/ReactJS/ReactSpl/src/components/TodoList/TodoAdd.js:10
   7 |         inputtext: text,
   8 |         idtoupdate: idupdate
   9 |     });
> 10 |     this.textInput.current.focus();
  11 | }
  12 | 
  13 | class TodoAdd extends Component {
...