如何使用诸如Redux和ReactJS之类的声明式/函数式库处理焦点？

Question

在查看其他开发人员在使用Redux时处理输入焦点的方式时，我遇到了一些关于ReactJS组件的通用指南，如下面的。然而，我担心的是focus（）函数是必需的，我可以看到在多个组件为焦点而争吵时可能出现奇怪的行为。有没有一种处理焦点问题的方法？是否有人在使用redux和react进行实用主义的焦点设置？如果是，您使用什么技术？

相关的：

• 如何设置Elm元素的焦点？
• 在purescript卤素中创建后自动聚焦输入元素
• https://github.com/cyclejs/cycle-core/issues/153

Answer 1

我的方法是使用ref回调，这是一种元素的onRender完整。在那个回调中，我可以聚焦（有条件地，如果需要的话），并获得未来聚焦的参考。

如果在操作运行后有条件地呈现输入，那么ref回调应该触发一个焦点，因为在调用操作后ref还不存在，但只有在呈现完成后才存在。处理componentdiddupdate之类的focus似乎一团糟。

// Composer.jsx -- contains an input that will need to be focused somewhere else

class Composer extends Component {
  render() {
    return <input type="text" ref="input" />
  }

  // exposed as a public method
  focus() {
    this.refs.input.focus()
  }
}

// App.jsx

@connect(
  state => ({ isComposing: state.isComposing }),
  ...
)
class App extends Component {
  render() {
    const { isComposing } = this.props // or props, doesn't matter
    return (
      <div>
        <button onClick={::this._onCompose}>Compose</button>
        {isComposing ? <Composer ref={c => {
          this._composer = c
          this._composer && this._composer.focus() // issue initial focus
        }} /> : null}
      </div>
    )
  }

  _onCompose() {
    this.props.startComposing() // fire an action that changes state.isComposing

    // the first time the action dispatches, this._composer is still null, so the ref takes care of the focus. After the render, the ref remains so it can be accessed:

    this._composer && this._composer.focus() // focus if ref already exists
  }
}

为什么不autoFocus或isfocusedprop？

由于HTMLInputElement将value作为一个道具，但将focus（）作为一种方法——而不是isFocusedprop——我会继续使用方法来处理它isFocused可以获取一个值，但是如果用户从输入中模糊，该值会发生什么变化？它将不同步。此外，如注释中所述，autoFocus可能与多个组件冲突

那么如何在道具和方法之间取舍呢？

在大多数情况下，道具就是答案。方法只能用于“开火并忘记”事件，例如当新消息出现时聊天中的scrollToBottom，ScrollToView等。这些是商店不关心的一次性行为，用户可以通过交互进行更改，因此布尔属性不适合。对于所有其他的事情，我会用道具。

这里有一个jsbin：

http://jsbin.com/waholo/edit?html， js，输出