Question

我有一个奇怪的难题。

当焦点输出事件隐藏元素时，ember无法附加正确触发焦点的相应点击事件。例如，如果<a>标记在输入上触发焦点输出事件并且后面的代码转为_focused到false，那么使用下面的代码，则永远不会触发selectOpts事件。只有在焦点输出隐藏a标记时才会出现这种情况。

同样奇怪的是，a标记如果只隐藏display:none并不是如何隐藏selectOpt仍然也不会触发<div class="dropdown"> {{input value=value class='form-control' focus-in="focused" focus-out="unfocused" }} {{#if _focused}} <ul class='dropdown-menu'> {{#each _filteredOptions as |opt|}} <li><a href="#" {{action "selectOpt" opt}}>{{opt}}</a></li> {{/each}} </ul> {{/if}} </div>操作。

这是我的代码：

class MyComponent extends Component {

  // initial state
  state = {
    inputsNumber: this.randomInputs()
  }

  getNextWord() {
    // do some stuff
    const nextInputNumber = this.randomInputs()
    const inputsState = {}

    // set all inputs to A
    for (let p = 0; p < nextInputNumber) {
      inputsState[this.inputKey(p)] = 'A'
    }
    // set new random number of inputs
    this.setState({
      ...inputsState
      inputsNumber: nextInputNumber,
      // set rest of state here if needed ...
    });
  }

  renderInputs() {
    var products = []
    // some code that generates a randomNumber
    for (let p = 0; p < this.state.inputsNumber; p++){
       products.push(
        <TextInput
          maxLength={1}
          key={p}
          onChangeText={(text) => this.handleChange(text, p)}
          value={ this.state[this.inputKey(p)]}
        />
      );
    }
    return products
  }

  handleChange (text, p) {
    this.setState({
      [this.inputKey(p)]: text
    })
  }

  randomInput () {
    return Math.floor(Math.random() * 8) + 1 // or whatever random function
  }

  inputKey (p) {
    return 'input ' + p
  }
}

这是一个显示问题的余烬。

https://ember-twiddle.com/6bbdb669d19d7a498e645bb0297f1b46?openFiles=templates.components.input-autocomplete.hbs%2Ctemplates.components.input-autocomplete.hbs

为了使问题集中在文本区域，然后尝试选择输入下方显示的链接之一。应该发生的是，当您选择链接时，它将使用值填充输入字段。

Answer 1

您只能使用focus-in而不是focus-in和focus-out。因此，当您单击输入focus-in事件触发器并将_focused设置为true时。然后，在操作selectOpt中设置值，然后设置属性_focused为false。

<div class="dropdown">
{{input value=value class='form-control' focus-in='focused' }}
{{#if _focused}}
  <ul class='dropdown-menu'>
      {{#each options as |opt|}}
          <li>
            <a href="#" {{action "selectOpt" opt}}>{{opt}}</a>
          </li>
      {{/each}}
  </ul>
{{/if}}

输入autocomplete.js

actions: {
    focused() {
        this.set('_focused', true);
    },
    selectOpt(opt) {
      console.log(opt);
       this.set('value', opt);
       this.set('_focused', false);
    }
}

我没有包含输入自动填充的所有代码，它与exxept操作之前相同。此外，我使用了选项数组，因为在点击输入时没有得到任何结果。

由焦点输出事件隐藏的ember元素是阻止点击事件

1 个答案: