Question

我使用onBlur关闭下拉列表，但我也想处理一个li渲染的点击处理程序，setState在这里不起作用，当用户再次打开下拉列表时行为被破坏，试试看这里：

我的代码：

toggleDropdown = () => {
    this.setState({
        openDropdown: !this.state.openDropdown
    })
  }

  render() {
    return (
      <div>
        <div tabIndex="0" onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
          MyList
        <ul className={this.state.openDropdown ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li onClick={()=> this.setState({openDropdown:false})}>xyz</li> {/* not working */}
        </ul>
      </div>
      </div>
    );
  }

Answer 1

您的代码无效，因为即使您click li，div容器中的onBlur事件仍然是焦点。

我们会在您的列表容器ref中添加，然后我们可以调用.blur()。我们在您的onClick li事件处理程序中使用它。

this.dropDownList.blur()

参见工作示例jsfiddle。

或运行此代码段：

＆＃13;

class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      isDropdownVisible: false
    }
    
    this.toggleDropdown = this.toggleDropdown.bind(this);
  }
  
  toggleDropdown() {
  	this.setState({
    	isDropdownVisible: !this.state.isDropdownVisible
    })
  }
  
  render() {
    return (
      <div>
        <div 
        tabIndex="0" 
        ref={c => this.dropDownList = c}
        onFocus={this.toggleDropdown} 
        onBlur={this.toggleDropdown}>
          MyList
        <ul
        className={this.state.isDropdownVisible ? 'show' : 'hide'}>
          <li>abc</li>
          <li>123</li>
          <li onClick={() => this.dropDownList.blur()}>xyz</li> {/* not working */}
        </ul>
      </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Hello initialName="World"/>,
  document.getElementById('container')
);

＆＃13;

.hide {
  display: none
}

.show {
  display: block !important;
}

div:focus {
  border: 1px solid #000;
}

div:focus {
		outline: none;
	}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

Answer 2

我将onClick事件添加到您的div并且它工作正常，您的代码变为：

  render() {
return (
  <div>
    <div tabIndex="0" onClick={() => this.setState({openDropdown: !this.state.openDropdown})} onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}>
      MyList
    <ul className={this.state.openDropdown ? 'show' : 'hide'}>
      <li>abc</li>
      <li>123</li>
      <li onClick={()=> this.setState({openDropdown:false})}>xyz</li> {/* not working */}
    </ul>
  </div>
  </div>
);

}

Answer 3

OnBlur是一个React Synthetic事件，可以通过两种方式使用：

要触发某事：

const {useState} = React;

const Example = ({title}) => {
  const [field, setField] = useState("");

  return (
    <div>
      <p>{title}</p>
      <p>Uppercase on blur</p>
      <input type="text" 
      value={field} 
      onChange={e=>setField(e.target.value)}
      //LOOK HERE !
      onBlur={e=>setField(e.target.value.toUpperCase())}
      />
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="OnBlur triggering:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

被某种事物触发

const {
  useState,
} = React;

const Example = ({
  title
}) => {
  const [field, setField] = useState("");

  return ( <
    div >
    <
    p > {
      title
    } < /p> <
    p > Remove focus by pressing enter < /p> <
    input type = "text"
    value = {
      field
    }
    onChange = {
      e => setField(e.target.value)
    }
    //LOOK HERE !
    onBlur = {
      e => setField(e.target.value.toUpperCase())
    }
    onKeyPress = {
      e => (e.key === 'Enter' ? setField(e.target.value.toLowerCase()) || e.target.blur() : null)
    }
    /> < /
    div >
  );
};

// Render it
ReactDOM.render( <
  Example title = "OnBlur triggered:" / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

因此要以编程方式使onBlur触发反应，有必要添加一个事件来监视您的更改。

更多信息： React SyntheticEvents

以编程方式使onBlur触发响应

3 个答案: