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

Question

<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，但这也不起作用。有任何想法吗 ？

Answer 1

使用enableUserSelectHack ，这不会干扰现有的风格

例如<Draggable enableUserSelectHack={false}>

使用cancel支柱

eg:给任何类名，没关系
<Draggable cancel=".just-name">
<input className="just-name" placeholder="Add text here" />
</Draggable>