javascript - 用输入 react 替换event.target

Question

更新
这是一些演示

contentEditable demo-要求双击H1才能进行编辑

replace with input demo-采用event.target样式，但渲染时使UI“抽搐”



因此，我有一些功能组件，例如：

component1.js

import React from 'react';
const component1 = props => (
<div>
 <h1>Title</h1>
</div>
);
export { component1 };

它们是可变的。 event.target可以是任何带有文本的内容，因此，段落，标题都可以。我试图让用户通过单击内容来内联编辑内容，因此我将一个函数 editMode传递给这些功能组件，这将通过编辑信息来更新父状态，例如这样：

<h1 onClick={event => {editMode(event, props.name, props.title, 'title')}}>title</h1>

这会将父本地状态更改为具有所有必要信息，以从redux获取值，定义目标等。在此示例中， props.name是组件的名称， props.title是值，而 'title'是object键入redux。

因此，我将一些内容添加到我的component1.js中，使其看起来像这样：

import React from 'react';
const component1 = props => (
    <div>
        {props.editState === 'true' &&
            <EditLayout
                name={props.name}
                target={props.target}
                value={props.value}
                onChange={event => someFunc(event)}
            />
        }
        <h1>Title</h1>
    </div>
    );
export { component1 };

现在这可以正常工作，除非它无法缩放。在这种情况下， EditLayout将仅返回具有正确值的输入。我需要做的是适应单击的内容，获取字体大小，背景，填充，边距，位置。我这样做对吗？我尝试的每种方式都遇到了巨大的问题：

想法1-将 EditLayout组件移到功能组件之外

问题：定位

因此，我将EditLayout移到同时包含 component1.js和 EditLayout的父组件。这将使我能够从功能组件内部进行操作，而不必在所有位置都包含它。然后，我将像这样从 event.target获取坐标和其他重要信息：

const coords = event.target.getBoundingClientRect();
const offsetX = coords.left;
const offsetY = coords.top;
const childHeight = coords.height;
const childWidth = coords.width;
const childClass = event.target.className;

然后，我将包裹 EditLayout以返回包含输入的容器，并将大小/坐标应用于绝对定位的容器。这将出现输入被随机像素偏移的问题，具体取决于 event.target的大小/位置。

想法2-将相关的计算样式传递给 EditLayout

问题：在渲染时抽搐，我必须为存在的每个可能的 EditLayout添加 event.target，并调节其渲染

因此，我将抓住所有重要的计算样式，如下所示：

const computedTarget = window.getComputedStyle(event.target);
const childMargins = computedTarget.marginBottom;
const childPaddings = computedTarget.padding;
const childFontSize = computedTarget.fontSize;
const childTextAlign = computedTarget.textAlign;

并将其传递给 component1.js，然后将其传递给 EditLayout event.target内的 component1.js. I'll then condition the组件以隐藏其是否被编辑，如下所示：

<h1 className={ props.target === 'title' ? 'd-none' : ''}>Title</h1>

并设置 EditLayout仅在需要时显示：

{props.target === 'title' && <EditLayout />}

在此示例中，单击h1将显示输入，但是布局本身在渲染时带有抽搐。输入将具有与h1或 event.target完全相同的页边距和字体大小，但它会显得更大并扩展布局。演示：



想法3-使用条件内容

问题：需要双击才能启用，在野生动物园中不起作用，不能让我预先选择值

这是他们中最奇怪的。我认为这将非常简单，在功能组件render中执行以下操作：

<h1 contentEditable={props.target === 'title'} onClick={event => props.setTarget(event)}>Title</h1>

但是，我必须双击以启用它。我不知道为什么，如果我每次触发 onClick时都附加一个控制台日志，我将获得正确的输出，我也将获得正确的目标值。我已经尝试了多种方法，但是只需要双击即可。甚至尝试在功能组件内部处理此问题，因为大多数东西都是由父组件处理的，这没有什么区别。

我简化了示例，因此可以安全地假设/理解以下内容：


我正在以正确的方式传递道具，它们不是不确定的
我正在使用引导程序
我正在使用样式化的组件，而 EditLayout是样式化的组件
接受道具并将其变成CSS，例如： font-size: ${props
=> props.fontSize};
值应该正确，我没有处理从 getComputedStyle()或 getBoundingClientRect()返回的任何内容
我热衷于使我的功能组件正常运行，并且易于
加。在这种情况下，功能组件是简单的HTML结构，
我想让它们尽可能简单

Answer 1

因此，对于contentEditable，有两种解决方案，不需要单击两次，而不是单击两次，而不是绑定onClick并将其传递以启用contentEditable，只需将contentEditable设置为true即可处理您喜欢的更改。这是一个有效的h1，不需要两次单击即可启用contentEditable，这与演示中的操作不同

<h1
    className="display-4 text-center"
    contentEditable
    suppressContentEditableWarning
    onBlur={event =>  updateValues(event)}
>
    Title 
</h1>

触发器更新的可用方法可以是 onBlur或 onInput。