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

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

通过

手柄

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

以下是官方文件给出的演示：

<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>

返回(
从这里拖
这个自述真的很拖沓。。。
);

检查它

句柄这里是一个CSS选择器

使用

启用userselecthack

，这不会干扰现有样式

例如

使用

cancel

prop

给任何一个类名，都没关系

---

很可能，您的组件也与

Draggable

IMO-重新呈现相关；这就是为什么你失去了对输入的关注。

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>
    );