Question

你能告诉我如何处理元素外部的点击。例如我有那个

<td><input type="number" className="hour" onKeyDown={this.editInlineHour(this)} /></td>

并且我只想在我点击该元素之外执行某个功能时才会发生反应！

我用那个

尝试

  window.addEventListener('mousedown', this.pageClick, false);

但即使我点击输入字段，该功能也会被执行。谢谢这是我的完整代码..基本上它是在桌面上的字段上的内联编辑..当我点击该字段时它显示输入字段..我希望当我点击外面那个字段时消失

editInlineHour:function () {

    },
    showInlineEditHour:function (i) {
        this.setState({
            index:i,
            showInlineHour:true
        })
    },
    showInlineEditStart:function (i) {
        this.setState({
            index:i,
            showInlineStart:true
        })
    },
    showInlineEditEnd:function (i) {
        this.setState({
            index:i,
            showInlineEnd:true
        })
    },
    pageClick:function () {
      this.setState({
          showInlineStart:false,
          showInlineEnd:false,
          showInlineHour:false
      });
    },
    render: function () {

        var itemMap = this.state.items.map(function (item, i) {
            var fieldDp1;
            if(this.state.showInlineStart){
                fieldDp1 = <input id="inlineDp1"  className="flatpickr" data-date-format="m/d/Y"/>
            }else{
                fieldDp1 = <td onDoubleClick={this.showInlineEditStart.bind(this,i)} ><FormattedDate value={item.startDate}/></td>
            }
            var fieldDp2;
            if(this.state.showInlineEnd){
                fieldDp2 = <input id="inlineDp2"  className="flatpickr" data-date-format="m/d/Y" />
            }else{
                fieldDp2 = <td onDoubleClick={this.showInlineEditEnd.bind(this,i)}><FormattedDate value={item.endDate}/></td>
            }
            var fieldHours;
            if(this.state.showInlineHour){
                fieldHours = <td><input type="number" className="hour" onKeyDown={this.editInlineHour(this)} /></td>
            }else{
                fieldHours =  <td  onDoubleClick={this.showInlineEditHour.bind(this,i)} >{item.workInHours}</td>

            }
            return (
                <tr key={i}>
                    <td><input type="checkbox" checked={item.selected} onClick={this.handleChange.bind(this,i)} /></td>
                    {fieldDp1}
                    {fieldDp2}
                    {fieldHours}
                    <td><label type="button" onClick={this.handleShowModal.bind(this,i)}><img height="30px" src="moliv.jpg"/></label>
                    </td>
                </tr>
            );

        }.bind(this));
        return (
            <div>
                <button className="btn btn-primary center-block" onClick={this.addElem}>Add</button>
                {this.state.list.theList.length > 0 ?  <button className="btn btn-primary" onClick={this.putResult}>Put result</button> :null}
                <table className="table scroll2">
                    <thead>
                    <tr className="danger">
                        <th><input  type="checkbox" checked={this.state.allChecked} onClick={this.toggleAll}/></th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Hours</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {itemMap}

                    </tbody>

                </table>
                {this.state.items.length > 0 ? <button  type="button" className="btn btn-danger" onClick={this.deleteItems}>Remove</button> : null}
                <Modal parentState={this.state} modalPropsId={this.props.theProps.id} handleHideModal={this.handleHideModal}/>
            </div>
        );

Answer 1

使用这种方法，您需要为输入元素分配一个const handleInsideClick = (e) => { e.stopPropagation(); }处理程序并停止传播，这样它就不会传播到windows onClick事件。

your dictionary ={'key':[1,2,3]}

React以智能方式处理事件，事件从DOM中的较深节点触发到顶部，因此当您单击输入时，您可以停止传播到父节点中的onClick处理程序或执行任何操作希望在点击事件中让它传播。

Answer 2

您可以在元素中添加引用，并检查Click事件是否在其外部。

function handleClickOutside(evt) {
  if (this.refs.yourInput !== evt.target) {
    callSomeFunction();
  }
  return true;
}

componentDidMount() {
  this.clickHandler = handleClickOutside.bind(this);
  document.addEventListener('click', this.clickHandler, true);
} 

componentWillUnmount() {
  document.removeEventListener('click', this.clickHandler, true);
}

如果您想在外面点击某个有孩子的组件，可以使用contains

if (!this.refs.yourComponent.contains(evt.target)) {
  callSomeFunction();
}

Answer 3

event.preventDefault（）方法会停止发生元素的默认操作（如果是您之后的内容）。

 <td><input type="number" id="inputField" className="hour" onKeyDown={this.editInlineHour(this)} /></td>

<强> JavaScript的：

$("#inputField").on("submit", function(event){
      event.preventDefault(); // Stop event 
      event.stopPropagation(); // Stop event (react)
});

http://jsbin.com/nejetoxeve/edit?html,js,console,output

Answer 4

您可以使用import React, { Component } from 'react'; import ReactDom from 'react-dom'; const styles = (onClick) => ({ position: 'fixed', pointerEvents: onClick ? 'auto' : 'none', top: 0, bottom: 0, right: 0, left: 0, height: '100%', }); export default class FixedLayer extends Component { static defaultProps = { zIndex: 2000, onClick: null, }; render () { const divProps = { ...this.props }; delete divProps.zIndex; return ( <div { ...divProps } onClick={ (e) => this.props.onClick && (e.target === ReactDom.findDOMNode(this)) && this.props.onClick() } style={{...this.props.style, ...styles(this.props.onClick), ...{zIndex: this.props.zIndex}}}> {this.props.children} </div> ) } }组件包装Component，如下所示：

openscad -o name1-name2.stl -D 'param1="name1"' -D 'param2="name2"' openscad-script.scad

外部单击元素上的句柄事件

4 个答案: