如何在 atlaskit 的内联编辑视图上触发取消事件？答案

【问题标题】：How to trigger a cancel event on inline edit view of atlaskit?如何在 atlaskit 的内联编辑视图上触发取消事件？
【发布时间】：2020-05-18 20:01:10
【问题描述】：

我正在尝试以编程方式在 Atlaskit 的内联编辑视图组件上触发 onCancel 事件，但我找不到任何 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>
    );
  }
}

【问题讨论】：

标签： inline-editing cancel-button atlaskit

【解决方案1】：

在我看来，最好的方法是使用 InlineEditUncontrolled 组件并使用以下道具使其成为受控组件：onConfirm、onCancel、isEditing。之后，您可以将内部 isEditing 状态更改为 false。

【讨论】：