Question

我有一个输入，用户输入关键字，然后触发一个函数来获取数据。然后，在输入下方的“建议结果” div中填充数据。所有这些都很好。

我正在尝试做到这一点，因此，当用户随时在输入或div（可见）中单击时，他们俩都具有焦点。单击div中的某个项目时，将根据所选项目运行功能，然后菜单关闭。如果他们单击任何东西，而不是输入或div，则div应该隐藏或不显示。我一直在尝试将onBlur，onFocus和onClick放置在哪里，但没有成功。只是我想要的部分。

我有一个名为“ inputFocused”的状态属性，该属性最初设置为false，当onFocus运行时，它设置为true，并且该布尔值确定是否显示了div。

我试图在将inputFocused设置为false的输入上使用onBlur，这当然会隐藏div。我删除了它并将其放在div中，但是由于它没有焦点，因此它永远不会运行。仅当我放置将inputFocused的状态设置为false的onclick时，它才会隐藏。但是，当用户单击输入之外的任何位置时，状态不会更改，不会触发onBlur。

class Hello extends React. Component {
  constructor() {
    super()
    this.state = {
      inputFocused: false,
      visible: false
    }

    this.onFocus = this.onFocus.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.select = this.select.bind(this)
  }

  onFocus() {
  this.setState({inputFocused: false})
    console.log("FOCUS: ", this.state.inputFocused)
    this.setState({ inputFocused: !this.state.inputFocused, visible: !this.state.visible })
  }
  onBlur() {
    console.log("Blur: ", this.state.inputFocused)
    this.setState({ inputFocused: !this.state.inputFocused })
  }

  select(){
  console.log("SELECTED")
  this.setState({ inputFocused: !this.state.inputFocused, visible: !this.state.visible })
  }
  render() {
    return (
      <div>
        <div onFocus={this.onFocus}>
          <input placeholder="MyList"></input>
        {this.state.inputFocused && this.state.visible ? (
        <ul>
          <li onClick={() => this.select()}>abc</li>
          <li onClick={() => this.select()}>123</li>
          <li onClick={() => this.select()}>xyz</li> 
        </ul>
        ) : null}
      </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Hello initialName="World"/>,
  document.getElementById('container')
);

这里是一个JSFIDDLE，我将其放在一起以显示当前拥有的内容。

Answer 1

您永远不会致电<a,e,i,o>，也不会在onBlur中重设visible。

onBlur

和

onBlur() {
  console.log("Blur: ", this.state.inputFocused)
  this.setState({ inputFocused: !this.state.inputFocused, visible: !this.state.visible })
}

这是更新的小提琴：http://jsfiddle.net/sellmeadog/pwujfmk0/

反应：将onFocus和onBlur绑定到输入和自定义下拉列表上吗？

1 个答案: