Как вызвать событие отмены в режиме встроенного редактирования atlaskit? - PullRequest
Новая
       24

Как вызвать событие отмены в режиме встроенного редактирования atlaskit?

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

Я пытаюсь программно вызвать событие onCancel в компоненте просмотра Inline Edit Atlaskit, но я не смог найти никаких документов API, где я мог бы инициировать событие отмены в этом встроенном компоненте. 

import React from 'react';
import styled from 'styled-components';
import Textfield from '@atlaskit/textfield';
import { gridSize, fontSize } from '@atlaskit/theme';

import InlineEdit from '@atlaskit/inline-edit';

const ReadViewContainer = styled.div`
  display: flex;
  font-size: ${fontSize()}px;
  line-height: ${(gridSize() * 2.5) / fontSize()};
  max-width: 100%;
  min-height: ${(gridSize() * 2.5) / fontSize()}em;
  padding: ${gridSize()}px ${gridSize() - 2}px;
  word-break: break-word;
`;

interface State {
  editValue: string;
}

export default class InlineEditExample extends React.Component<void, State> {
  state = {
    editValue: 'Field value',
  };

  render() {
    return (
      <div
        style={{
          padding: `${gridSize()}px ${gridSize()}px ${gridSize() * 6}px`,
        }}
      >
        <InlineEdit
          defaultValue={this.state.editValue}
          label="Inline edit"
          editView={fieldProps => <Textfield {...fieldProps} autoFocus />}
          readView={() => (
            <ReadViewContainer>
              {this.state.editValue || 'Click to enter value'}
            </ReadViewContainer>
          )}
          onConfirm={value => this.setState({ editValue: value })}
        />
      </div>
    );
  }
}

1 Ответ

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

На мой взгляд, лучший способ сделать это - использовать компонент InlineEditUncontrolled и сделать его контролируемым компонентом, используя следующие параметры: onConfirm, onCancel, isEditing. После этого вы можете изменить внутреннее состояние isEditing на false.

...