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

Question

你能告诉我如何处理元素外部的点击吗？例如我有这个

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

我只想当我点击该元素外部时执行某些功能，这就是 react !

我尝试一下

  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

您可以向元素添加引用并检查点击事件是否在元素之外。

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