<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,但这也没有用。有任何想法吗 ?
通过handle
来实现拖动更好,你也可以轻松避免这种问题。
以下是官方文档给出的演示:
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选择器
enableUserSelectHack
,这不会干扰现有的风格
例如<Draggable enableUserSelectHack={false}>
cancel
道具
例如:给出任何类名,没关系
<Draggable cancel=".just-name">
<input className="just-name" placeholder="Add text here" />
</Draggable>