Question

我正在编写一个基本的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”内部的Input。
TodoAdd构造函数：

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

JSX中的

textInput引用：

<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组件中输入的文本，并且输入文本将被聚焦。正常情况下，没问题。
现在，如果我单击“Sửa”按钮，则切换到另一条路线，即MusicPlayer或“上下文”路线...，然后再次切换到TodoList ... 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 {

使用外部功能控制参考或状态时出错

0 个答案: