【问题标题】:Enable redux-form and set focus to field启用 redux-form 并将焦点设置为字段
【发布时间】:2018-07-10 14:05:55
【问题描述】:

默认情况下我禁用了表单字段,当用户单击按钮Edit 时,它将启用该字段。我也想专注于该领域,但我不知道如何。我已经为该字段创建了ref 并尝试了一些focus() 功能,但它没有奏效。您可以在sandbox 上试用。

【问题讨论】:

  • 两个原因 1) 您正在使用自定义 TextField 无状态组件:component={TextField}。您不能将 ref 分配给无状态组件。将TextField 转换为类组件。 2) 你需要将 withRef 属性添加到你的 reduxForm Field 组件中

标签: javascript reactjs redux-form


【解决方案1】:
  1. 您必须将 ref 分配给 input 元素而不是 Field 组件
  2. 添加回调以在父组件中设置子组件输入的引用
  3. 在按下编辑按钮时使用引用来聚焦输入:

https://codesandbox.io/s/rlx390xn6m

【讨论】:

    【解决方案2】:

    只是 HTML 的 autofocus 要好得多: https://davidwalsh.name/autofocus

    • 与驼峰式反应使用:autoFocus

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-16
      • 2019-07-13
      • 1970-01-01
      • 2020-12-26
      • 1970-01-01
      相关资源
      最近更新 更多