Question

我正在使用npm包＆＃34; react-draggable＆＃34;允许拖动包含表单的元素。

既然我可以拖动我的元素，我很高兴...但输入字段不可点击，因为你无法点击和输入。我唯一能做的就是点击并按住然后输入。

段：

＆＃13;

render() {
        return (
            <Draggable>
                <div className="pokedex">
                    <div className="screen">
                        {this.state.isSearching ? (<Loader/>) : null}
                        {this.state.hasFound ? this.renderResult() : null}
                        {this.state.hasError ? (<p className="text-center error">{this.state.hasError}</p>) : null}
                    </div>
                    <form onSubmit={(e) => this.onSubmit(e)}>
                        <input className="field" type="text" placeholder="Who is this pokemon?" onChange={(e) => this.setPokemon(e.target.value)}/>
                        {this.state.isSearching ? <input className="button text-center" disabled type="submit" value="Find!"/> : <input className="button text-center" type="submit" value="Find!"/>}
                    </form>
                    <div className="button-group">
                        <div className="blue-button"/>
                        <div className="green-button"/>
                        <div className="orange-button"/>
                    </div>
                </div>
            </Draggable>
        )
    }

＆＃13;

有没有办法避免这种行为？

Answer 1

添加event.stopPropagation() onMouseDown就可以了！

防止当前事件在捕获和冒泡阶段进一步传播。

段：

＆＃13;

render() {
        return (
            <Draggable>
                <div className="pokedex">
                    <div className="screen">
                        {this.state.isSearching ? (<Loader/>) : null}
                        {this.state.hasFound ? this.renderResult() : null}
                        {this.state.hasError ? (<p className="text-center error">{this.state.hasError}</p>) : null}
                    </div>
                    <form onSubmit={(e) => this.onSubmit(e)}>
                        <input onMouseDown={(e) => {e.stopPropagation()}}  className="field" type="text" placeholder="Who is this pokemon?" onChange={(e) => this.setPokemon(e.target.value)}/>
                        {this.state.isSearching ? <input className="button text-center" disabled type="submit" value="Find!"/> : <input className="button text-center" type="submit" value="Find!"/>}
                    </form>
                    <div className="button-group">
                        <div className="blue-button"/>
                        <div className="green-button"/>
                        <div className="orange-button"/>
                    </div>
                </div>
            </Draggable>
        )
    }

＆＃13;

Answer 2

stopPropagation() 对我不起作用。但是 cancel 可以。

render() {
        return (
            <Draggable
             cancel=".field"
            >
                <div className="pokedex">
                    <div className="screen">
                        {this.state.isSearching ? (<Loader/>) : null}
                        {this.state.hasFound ? this.renderResult() : null}
                        {this.state.hasError ? (<p className="text-center error">{this.state.hasError}</p>) : null}
                    </div>
                    <form onSubmit={(e) => this.onSubmit(e)}>
                        <input className="field" type="text" placeholder="Who is this pokemon?" onChange={(e) => this.setPokemon(e.target.value)}/>
                        {this.state.isSearching ? <input className="button text-center" disabled type="submit" value="Find!"/> : <input className="button text-center" type="submit" value="Find!"/>}
                    </form>
                    <div className="button-group">
                        <div className="blue-button"/>
                        <div className="green-button"/>
                        <div className="orange-button"/>
                    </div>
                </div>
            </Draggable>
        )
    }

React-draggable npm包可防止单击输入字段内部

2 个答案: