作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使用 Material UI 时遇到问题 Autocomplete
与试剂(ClojureScript)。该元素呈现良好,但是当我尝试单击它时,出现以下异常:
Uncaught TypeError: Cannot read property 'focus' of null
at handleClick (useAutocomplete.js:938)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackImpl (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:293)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:307)
at executeDispatch (react-dom.development.js:390)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:412)
at forEachAccumulated (react-dom.development.js:3260)
at runEventsInBatch (react-dom.development.js:3305)
at handleTopLevel (react-dom.development.js:3515)
useAutocomplete.js:322 Uncaught TypeError: Cannot read property 'removeAttribute' of null
at eval (useAutocomplete.js:322)
at eval (useEventCallback.js:26)
at eval (useAutocomplete.js:433)
at eval (useEventCallback.js:26)
at eval (useAutocomplete.js:463)
at eval (useAutocomplete.js:528)
at commitHookEffectListMount (react-dom.development.js:19765)
at commitPassiveHookEffects (react-dom.development.js:19803)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackImpl (react-dom.development.js:238)
打破 JS 调试器,我看到
inputRef.current
为空(这是在
focus
和
removeAttribute
上调用的。(奇怪的是,在文件中设置
inputRef
的唯一地方是通过调用
useRef(null)
,这导致
inputRef.current
为空) .)
(ns my-product-redacted.views.atoms
(:require [reagent.core :as r]
["@material-ui/lab/Autocomplete" :default Autocomplete]
;; other requires
))
(def autocomplete-field (r/adapt-react-class Autocomplete))
然后,在一个 React 组件中,它的用法如下:
[a/autocomplete-field {:render-input (fn [js-params]
(let [clj-params (js->clj js-params)
params {:label label
:width width
:select select?
:Input-label-props {:shrink true}
:Select-props {:native true}}
all-params (into clj-params params)]
(js/console.log (clj->js all-params))
(r/as-element [a/text-field all-params])))
:options (when select? (cons {:value "" :label ""} options))
:get-option-label (fn [option] (or (get (js->clj option) "label") ""))
:default-value (when (not select?) value-override)
:value (when select? value)
:disabled disabled?
:on-focus #(re-frame/dispatch [::forms/on-focus path])
:on-blur #(re-frame/dispatch [::forms/on-blur path])
:on-change #(re-frame/dispatch (conj on-change (-> % .-target .-value)))})]
(这里,
a/text-field
也以与
a/autocomplete-field
相同的命名空间和类似的方式定义。)
(js/console.log (clj->js params))
调用)显示
inputProps.ref.current
设置为空。然而,
InputProps.ref
不为空。即便如此,我还是尝试手动关联通过
InputProps.ref
传递的相同函数。至
inputProps.ref.current
,但这并没有什么区别。
text-field
用
ref
放入一个 div取自
InputProps.ref
也没什么区别。
最佳答案
调用 js->clj
在渲染输入 js 参数上打破了它们。
我在我的演示库中放了一个 Material UI 自动完成组件的快速演示 here .
但主要取自官方试剂文档/示例here :
(defn autocomplete-example []
[:> mui/Grid
{:item true}
[:> Autocomplete {:options ["foo" "bar" "foobar"]
:style {:width 300}
;; Note that the function parameter is a JS Object!
;; Autocomplete expects the renderInput value to be function
;; returning React elements, not a component!
;; So reactify-component won't work here.
:render-input (fn [^js params]
;; Don't call js->clj because that would recursively
;; convert all JS objects (e.g. React ref objects)
;; to Cljs maps, which breaks them, even when converted back to JS.
;; Best thing is to use r/create-element and
;; pass the JS params to it.
;; If necessary, use JS interop to modify params.
(set! (.-variant params) "outlined")
(set! (.-label params) "Autocomplete")
(r/create-element mui/TextField params))}]])
关于reactjs - 自动完成问题(Material UI + React + Reagent/ClojureScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63944323/
我们面临一个用例,我们需要在 S3 上存储用户的 secret 图像。现在 S3 可以通过 HTTP 访问,如果我们授予对对象的读取权限,它们将通过 Web 提供给全世界。我们需要将图像/文件仅限于该
我是一名优秀的程序员,十分优秀!