React - 具有输入的可拖动组件在单击该输入时失去焦点的能力

Posted 2023-05-08

【中文标题】React - 具有输入的可拖动组件在单击该输入时失去焦点的能力

【英文标题】：React - Draggable components with inputs lose the ability to focus when clicking that input

【发布时间】：2018-03-07 18:22:12

【问题描述】：

<Draggable axis="y"
      grid=[135,135]
      onStop=this.handleStop
      defaultPosition=x: this.props.task.positionX, y: this.props.task.positionY,>
    <div id="edit-task-component">
      <form onSubmit=this.handleSubmit id="edit-task-form" className="edit-task-form">
        <input type="text" name="name" onChange=this.handleChange placeholder="Name" value=this.state.name required/>
        <input type="text" name="description" onChange=this.handleChange placeholder="Description" value=this.state.description required/>
        <button className="btn submit-btn" type="submit">Save </button>
      </form>
    </div>
 </Draggable>

发生的情况是我将单击输入，它会聚焦一秒钟然后失去焦点——所以我无法输入输入。我必须单击它几次才能真正聚焦，因此允许我输入输入。点击一次后如何让它保持专注？单击输入后，我尝试将自动对焦设置为true，但这也不起作用。有什么想法吗？

【问题讨论】：

可能，您的组件正在重新渲染 - 也与 Draggable IMO - 相关；这就是为什么你会失去对输入的关注。

【参考方案1】：

使用enableUserSelectHack，这不会干扰现有样式

例如<Draggable enableUserSelectHack=false>

使用cancel 道具

eg: 给任何类名，没关系

<Draggable cancel=".just-name"> <input className="just-name" placeholder="Add text here" /> </Draggable>

【参考方案2】：

通过handle 启用拖动效果更好，您也可以轻松避免此类问题。

这是官方文档给出的demo：

return (
        <Draggable
            axis="x"
            handle=".handle"
            start=x: 0, y: 0
            grid=[25, 25]
            zIndex=100
            onStart=this.handleStart
            onDrag=this.handleDrag
            onStop=this.handleStop>
            <div>
                <div className="handle">Drag from here</div>
                <div>This readme is really dragging on...</div>
            </div>
        </Draggable>
    );

查看doc

这里的句柄是一个CSS选择器