ref 相关问题

如何通过react-hook-form使用Material UI Select？

我使用 Material UI 和 React Hook Form 在 React 中构建了一个表单。我正在尝试创建一个用作选择输入的自定义 TextField 元素。我希望它是一个不受控制的组件......

函数组件不能给出引用。 MUI v5 自动完成

我正在尝试在 Autocomplete MUI v5 中使用 ListboxComponent 道具的自定义组件，但我收到此错误： 函数组件不能被指定引用。尝试访问此引用将失败。迪...

如何从 git 中删除与过滤器匹配的远程引用？

从 GitLab 迁移到 GitHub 时，在执行 git push --mirror 后，我注意到 git ls-remote --refs （在 GitHub 上的目标存储库中）显示了一些以 refs/

Vue3 参考没有刷新？

我需要一些帮助来理解裁判的工作方式。我很确定我犯了一些明显的基本错误，但我就是不明白。有人可以解释一下吗？ 在脚本设置中我得到了一些道具...

F# 通过引用传递

我正在尝试在 F# 中通过引用传递。在C#中，使用ref和out关键字非常容易，但在F#中似乎没那么简单。我刚刚读过这个：http://davefancher.com/2014/03/24/passing-

为什么迭代器方法不能采用“ref”或“out”参数？

我今天早些时候尝试过这个： 公共接口 IFoo { IEnumerable GetItems_A( ref int SomethingElse ); IEnumerable GetItems_B( ref int SomethingElse ); } 公开课...

尽管内存地址相同，Rust Arc 指针比较还是失败

在 Rust 中，我试图创建一组可以在某种目标/依赖链中相互关联的对象。我想我可以使用一个特征，并为每个对象分配一个“目标”......

什么时候建议不要使用 Eigen::Ref 作为参数？

我目前正在编写很多接受块和表达式作为输入的函数。我通常发现使用 Refs 更容易，因为它们简单、轻量级，而且也很容易确保...

Vue 3：将引用值绑定到对象属性

我遇到了一个问题，我试图使用新的组合 API 将对象属性绑定到 Vue 中的引用。我希望模板在设置引用后使用新值重新渲染

如何在第一个组件加载时获取加载的引用数组

我在更新 vue 3 项目中的反应式对象时遇到一些问题，我正在创建一个 google.maps.marker.AdvancedMarkerElement 数组，我正在创建这样的数组 -> 本地化.forEach((

PowerReadFriendlyName 报告错误的缓冲区长度

我正在制作一个 C# 程序，通过 PInvoking Win32 函数 PowerReadFriendlyName 从电源管理方案的 GUID 中检索电源管理方案的名称。然而，该函数似乎报告错误的缓冲区

ref 在 HTMLAttributes 中不可用<HTMLDivElement>

我有一个可重用的包装组件，如下所示： 从“react”导入{FC，HTMLAttributes}； const 包装器： FC> = ({ 孩子们， 班级名称...

React 上有 2 个参考文献的问题

我有 1 个来自 useForm 的参考 - 注册 const {注册，错误} = useForm({ reValidateMode：“onChange”， 模式：“onChange”， 原生验证：假 }); <

如何检查正在更新的表中的 ref 列的属性 - Oracle

我对 Oracle 很陌生，并且在 REF 方面遇到困难。 我有一个具有以下结构的员工类型： 创建类型 person_type 作为对象（ 地址at_address_type， 名称 at_name_type, 酸碱度...

如何在 Vue 3 的自定义组件中同时使用 ref 和 v -for ？

我有字段验证，在提交期间我需要关注有错误的第一个输入字段 从我的父组件 CustomForm 我无法访问 CustomInput 中的子组件输入 我有字段验证，在提交期间我需要关注有错误的第一个输入字段 从我的父组件 CustomForm 我无法访问 CustomInput 中的子组件输入 <script setup lang="ts"> import CustomForm from '@/components/CustomForm.vue' </script> <template> <CustomForm /> </template> <style scoped lang="scss"> </style> <script setup lang="ts"> import CustomInput from '@/components/CustomInput.vue' import { useForm } from '@/hooks/useForm' const formData = [ { name: 'title', label: 'title', required: true, value: '', isValid: false, errorMessages: [] }, { name: 'name', label: 'name', required: true, type: 'textarea', value: '', isValid: false, errorMessages: [] } ] const { isFormValid, fieldsForm, submit } = useForm(formData) const submitForm = () => { submit() if (isFormValid.value) { console.log('submit') console.log(fieldsForm) } } </script> <template> <form @submit.prevent="submitForm"> <CustomInput v-for="data in fieldsForm" :key="data.name" ref="customInputRef" :field-data="data" v-model="data.value" v-model:error="data.errorMessages" v-model:isValid="data.isValid" /> <button type="submit">Отправить</button> </form> </template> <style scoped lang="scss"> </style> <script setup lang="ts"> import { computed, ref, watchEffect } from 'vue' import { v4 as uuidv4 } from 'uuid' import type { IFieldProps } from '@/types/Field' import { useInputValidator } from '@/hooks/useInputValidator' const props = withDefaults(defineProps<IFieldProps>(), { placeholder: (props: IFieldProps) => `Input ${props.fieldData.name.toUpperCase()} please` }) const emit = defineEmits([ 'update:modelValue', 'update:error', 'update:isValid', ]) const r= ref(null) const inputComponent = ref(props.fieldData.type !== 'textarea' ? 'input' : 'textarea') const inputId = computed(() => `input-${uuidv4()}`) const { isBlurred,field, blurAction,inputAction, errors, isValid } = useInputValidator(props.fieldData) const inputHandler = (e: Event) => { const v = (e.target as HTMLInputElement).value emit('update:modelValue', v) inputAction() emit('update:error', errors) } const blurHandler = (e: Event) => { blurAction() emit('update:error', errors) emit('update:isValid', isValid) } </script> <template> <div class="field"> <label class="field__label" :for="inputId"> {{ field.label }} </label> <div class="field__inner"> <div class="field-icon" v-if="$slots.icon"> <slot name="icon"></slot> </div> <component :is="inputComponent" :name="field.name" ref="r" class="field__input" :class="{ valid:field.isValid, error:field.errorMessages.length, }" :id="inputId" :value="field.value" @input="inputHandler" @blur="blurHandler" :placeholder="props.placeholder" /> <template v-if="field.errorMessages"> <p class="field__error" v-for="(error,index) in field.errorMessages" :key="index"> {{ error }} </p> </template> </div> </div> </template> import type { Field } from '@/types/Field' import { computed, ref } from 'vue' import { validateField } from '@/helpers/validateField' export const useForm = (formFields: Field[]) => { const fieldsForm = ref(formFields) const isFormValid = computed(() => fieldsForm.value.every(field => field.isValid) ) const updateValidity = (fieldName: string, errors: string[]) => { const field = fieldsForm.value.find(data => data.name === fieldName) if (field) { field.errorMessages = errors } } const checkFields = () => { fieldsForm.value.forEach(field => { let err: string[] = [] if (field.required) { if (!isFormValid.value && !field.errorMessages.length) { err = validateField(field.name, field.value) updateValidity(field.name, err) } } }) } const submit = () => { checkFields() } return { submit, isFormValid, fieldsForm } } import { computed, ref, watchEffect } from 'vue' import type { Field } from '@/types/Field' import { validateField } from '@/helpers/validateField' export const useInputValidator = (fieldForm: Field) => { const field = ref<Field>(fieldForm) const errors = ref(field.value.errorMessages) const isBlurred = ref(false) const isValid = computed(() => { return !errors.value.length }) watchEffect(()=>{ if(field.value.errorMessages.length){ isBlurred.value= true errors.value= field.value.errorMessages } }) const inputAction = () => { if (isBlurred.value) { errors.value = validateField(field.value.name, field.value.value) } } const blurAction = () => { if (isBlurred.value) return errors.value = validateField(field.value.name, field.value.value) isBlurred.value =true } return { field, isValid, errors, blurAction, inputAction, isBlurred } } 我验证了这些字段。但重点关注的功能仍然存在。我想通过钩子访问表单字段 如何更改主数组的数据，例如isValid？ ...................................................... ...................................................... .. 首先，要根据文档应用v-for内的引用，请使用数组或函数。 其次，在子组件中，使用 defineExpose() 绑定到所需元素组件引用。 我创建了简单的示例： /* App.vue */ <script setup> import { ref } from 'vue'; import CustomInput from './CustomInput.vue'; const formData = ref({ firstName: '', lastName: '', }) const inputs = ref({}); const focus = (key) => { inputs.value[key].input.focus(); } </script> <template> <div class="inputs"> <CustomInput v-for="(value, key) in formData" v-model="formData[key]" :ref="el => inputs[key] = el" :label="key" ></CustomInput> </div> <br> <div class="btns"> <button v-for="(value, key) in inputs" @click="focus(key)" > Focus to {{ key }} </button> </div> <br> <pre>{{ formData }}</pre> </template> <style> .inputs { display: grid; gap: 4px; } .btns { display: flex; gap: 8px; } </style> /* CustomInput.vue */ <script setup> import { ref } from 'vue'; defineProps({ label: String, }) const model = defineModel(); const input = ref(); defineExpose({ input }); </script> <template> <label> {{ label }}: <br> <input ref="input" v-model="model" > </label> </template>

从下拉列表中选择时使用参考滚动到做出反应

好吧，我正在尝试创建一个下拉菜单，当选择一个项目时，页面应该滚动到特定部分（参考）。 我有几个具有相同引用的 div（因为我有超过 30 个 div 需要......

ref 为空 Typescript + NextJS

我需要从父组件内的自定义子组件调用方法。 但不幸的是，子组件（称为 CanvasUI）的引用始终为空。我不明白为什么...

我们如何让一个单词指代乳胶中的某个部分或图片之类的东西？

我们如何让一个单词指代乳胶中的某个部分或图片之类的东西？ 我知道如何引用某事物 ef{} 但当我们使用它时，我们会看到部分或表格或图片的编号...

源生成器库可以针对的最大 C# 版本是什么？

源生成器应以 .NET Standard 2.0 为目标。这是支持 .NET Framework 的最后一个 .NET Standard 版本。最新 .NET Framework 版本中的默认 C# 版本是 C# 7.3。 假设一个

当我将引用放入 Box/div 时，UI 会移动

我有以下代码： 它看起来像这样： 我需要添加一个 div 并在其中引用： 如果我这样做，所有用户界面都会向上移动。看这张图： 我意识到只有当我添加...