Question

我有以下HOC：

class SectionContainer extends Component {
  ... // class internal methods
  render () {
    return (
      <section>
        {this.props.children}
      </section>
      <Snackbar
        ...
        action={snackbarAction} />
    );
  }
}

例如，现在我具有“类别”组件，在其中实现了上述HOC：

class Categories extends Component {
  ... // class internal methods
  render () {
    const {
      categories,
      error
    } = this.props;

    let content = error ? <p>Oops, couldn't load categories...</p> : <Spinner />;

    if ( categories.length > 0 ) {
      content = (
        categories.map(category => {
          return (
            <Category
              displayIn='panel'
              category={category}
              key={category.id}
              textChanged={this.onTextChangeHandler}
              blurred={this.onBlurHandler} />
          );
        })
      );
    }
    return (
      <SectionContainer searchVisible ref='sectionContainer'>
        {content}
      </SectionContainer>
    );
  }
}

从Firebase检索类别并存储在状态中。

最后是单个类别组件：

const category = (props) => {
  const nameRef = React.createRef();
  const colorRef = React.createRef();
  const imageRef = React.createRef();

  let currentCategory = null;
  const onFocusHandler = (category) => {
    setCurrentCategory(category);
  };
  const onBlurHandler = (originalCategory) => {
    setCurrentCategory(originalCategory);
    props.blurred(originalCategory, currentCategory);
  };

  const setCurrentCategory = category => {
    currentCategory = updateObject(category, {
      name: nameRef.current.innerText,
      color: colorRef.current.innerText,
      image: imageRef.current.dataset.image
    });
  };

...

return (
  <Card onFocus={() => onFocusHandler(props.category)}>
    <div className='CategoryImage'>
      <div
        id={'iamge-' + props.category.id}
        ref={imageRef}
        className='Image'
        data-image={props.category.image}></div>
    </div>
    <CardContent className='CardContent'>
      <RootRef rootRef={nameRef}>
        <Typography
          contentEditable={true}
          suppressContentEditableWarning={true}
          id={'name-' + props.category.id}
          onBlur={() => onBlurHandler(props.category)}
          onInput={() => props.textChanged(props.category)}>
            {props.category.name}
        </Typography>
      </RootRef>
      <RootRef rootRef={colorRef}>
          <Typography
            contentEditable={true}
            suppressContentEditableWarning={true}
            id={'color-' + props.category.id}
            onBlur={() => onBlurHandler(props.category)}
            onInput={() => props.textChanged(props.category)}>
              {props.category.color}
          </Typography>
        </RootRef>
    </CardContent>
  </Card>);
};

基本上，当我开始编辑这些类别之一中的文本时，我立即获得带有2个按钮的“快餐”栏-“保存”和“放弃”。单击“保存”将所有更改保存到Firebase。

问题是：当单击“放弃”时，如何放弃所有所做的更改并将类别恢复为初始状态，而无需刷新页面（我尝试过，它起作用了，但是在这种情况下，UX是不太好，再加上我想将另一个呼叫保存到服务器）。我试图通过将状态深复制到新阵列并用旧阵列更改原始状态来重新分配状态，但收到一条消息，指出未检测到任何变化（很明显）。有什么想法吗？

如何舍弃React子组件中contentEditable div中的更改？

0 个答案: