HTML元素在React中动态设置自动对焦

时间:2018-10-29 19:19:13

标签: reactjs react-redux kendo-react-ui

我有两个兄弟姐妹。

一个组件中包含文本框,复选框,下拉控件。

另一个组件包含Kendo Grid。

每当用户单击网格行时,我都希望将焦点放在上面的元素之一上 包括文本框的组件。

使用的方法:

1。我不想使用ref,因为我在一个组件中有多个控件。

2。我已将自动对焦属性动态添加到输入元素。

1 个答案:

答案 0 :(得分:0)

免责声明::我不确定 这些解决方案是否是React的最佳做法

有2种方法,都使用 { "custom_field": false, "lookup": {}, "convert_mapping": { "Potentials": null, "Contacts": null, "Accounts": null }, "visible": true, "field_label": "Lead Owner", "length": 120, "view_type": { "view": true, "edit": true, "quick_create": false, "create": true }, "read_only": false, "api_name": "Owner", "unique": {}, "data_type": "ownerlookup", "formula": {}, "currency": {}, "id": "410888000000000553", "decimal_place": null, "pick_list_values": [], "auto_number": {} } ,但实现起来更聪明:

  • 在输入周围创建包装器,并为其分配refs。每当您想专注于输入时,只需使用refs。工作示例:https://codesandbox.io/s/195kkrpvq
  • 创建一个对象,该对象将字段名称存储为键,并将其引用存储为值。只需使用wrapperRef.querySelector('[name=yourInput])专注于输入即可。工作示例:https://codesandbox.io/s/61jl7q9v43

同样,我不确定这些实现是否是最佳做法,但它们现在应该做得到

相关问题