Блог

Я хочу выделить новую задачу после ее создания. Однако при добавлении новой задачи вся таблица будет повторно отображаться, поэтому, хотя у меня так много случаев что-то сделать перед рендерингом, она будет сброшена. Поэтому я объявляю newTaskID: null состояние, предназначенное для хранения идентификатора, и выделяю его после рендеринга, что хорошо. Однако мне также нужно newTaskID: null вернуть значение null, что снова вызовет повторный рендеринг, который сбросит мою таблицу и мою выделенную задачу. Я знаю, что что-то пропустил, но пока не могу этого понять. Пожалуйста, помогите.

 constructor(props) {
    this.state = {
        newTaskID: null
    }
}

createTask = (value) => {
    /.....
    this.setState({ newTaskID: value.id })
}

componentDidMount() {
    gantt.attachEvent('onGanttRender', function () {
        if (this.state.newTaskID) {
            //Highlight task and set state back to null
            highlightTask(this.state.newTaskID)
            //Set state back to null so it won't highlight anything
            this.setState({ newTaskID: null })
        }
    })
}
  

Добавьте дополнительный флаг в состояние, чтобы проверить, есть ли выделенная задача. Это было бы что-то вроде этого:

 this.state = {
  newTaskID: null,
  taskIsHighlighted: false,
}
  

И вы должны установить taskIsHighlighted значение true, когда задача была выделена, и установить значение false при следующем рендеринге. Ваш componentDidMount будет:

 componentDidMount() {
    gantt.attachEvent('onGanttRender', function () {
        if (this.state.newTaskID) {
            //Highlight task and set state back to null
            highlightTask(this.state.newTaskID)
            //Set state back to null so it won't highlight anything
            this.setState({ taskIsHighlighted: true })
        }

        if (this.state.taskIsHighlighted) {
          this.setState({ newTaskID: null, taskIsHighlighted: false })
        }
    })
}