React admin AutocompleteInput不会在第一次单击时取值
React admin是一个基于React的开源框架，用于快速构建管理界面。AutocompleteInput是React admin提供的一个组件，用于实现自动完成输入的功能。
在React admin中，AutocompleteInput组件在第一次单击时不会立即取值的原因可能是因为它需要从后端获取数据并进行筛选。通常情况下，AutocompleteInput组件会在用户输入时发送请求，获取匹配的选项列表，并在用户选择某个选项后才会取值。
AutocompleteInput的优势在于它可以提供更好的用户体验，用户可以通过输入关键字来快速筛选出符合条件的选项，从而减少了用户的操作次数。
AutocompleteInput适用于需要从大量选项中选择的场景，比如选择城市、选择标签等。它可以提高用户的选择效率，并且可以根据用户的输入进行智能匹配。
腾讯云提供了一系列与React admin相关的产品，例如云服务器、云数据库、云存储等。这些产品可以帮助开发者在构建React admin应用时提供稳定可靠的基础设施支持。具体产品介绍和链接地址可以参考腾讯云官方网站的相关页面。
总结：React admin的AutocompleteInput组件在第一次单击时不会立即取值，它需要从后端获取数据并进行筛选。AutocompleteInput的优势在于提供更好的用户体验，适用于需要从大量选项中选择的场景。腾讯云提供了与React admin相关的产品，可以为开发者提供基础设施支持。
相关·内容
当我尝试通过以下代码在我的仪表板组件上使用react-admin组件时(我假设这是唯一相关的行)：
import { ReferenceInput, AutocompleteInput } from "react-admin";
<ReferenceInput source="id" reference="buildings">
<AutocompleteInput source="ProjectName" />
</ReferenceInput>
我得到以下错误：“错误:字段必须在用re
浏览 2提问于2018-08-20得票数 2
在我的react-admin应用程序中，我有一个使用ReferenceInput的Edit视图。 当我从<AutocompleteInput>元素中选择一个条目时，react-admin调用以下URL来获取所请求的资源： http://localhost:8090/api/entities/institution?id=84246 但是，API需要以下内容： http://localhost:8090/api/entities/institution/84246 有没有办法告诉react-admin使用path参数而不是query参数？ export const CustomIn
浏览 67提问于2019-03-22得票数 0
回答已采纳
我正在使用react admin为我的客户开发一个新的面板。我想使用AutoCompleteInput。但我在文档和在线上找到的所有示例都显示了在同一组件中定义的简单静态数据。 我想将AutoCompleteInput用于从我的API中检索到的项的列表。 我该怎么做呢？
浏览 71提问于2021-07-26得票数 1
我在React中有以下代码-Admin v3
<AutocompleteInput
onSelect={(value) => {
setCurrentCategory({ reference: value.id });
}}
升级到v4后，AutocompleteInput使用MUI而不是下行，如中所述
因此，上面的代码与错误：Property 'id' does not exist on type 'SyntheticEvent<HTMLDivElemen
浏览 19提问于2022-10-27得票数 0
在react admin中使用AutocompleteInput是非常好的。但是，有没有办法让它可重置呢？谢谢!
<ReferenceInput
label={translate('resources.cards.fields.search_name')}
source="id"
reference="cards"
alwaysOn
resettable
>
<AutocompleteInput optionText="name" inputValueMatcher
浏览 2提问于2018-10-19得票数 0
我使用的是React Admin，我知道React Admin使用的是资料-UI，但是我找不到类似的东西。实际上，我想要的是一种AutocompleteInput，它并不强迫我选择一个元素。freeSolo就是这样工作的。
我只是想确保如果在React Admin中不存在这种情况，那么我就创建一个新的元素。
目前，我知道可以使用以下自定义选项来定义AutocompleteInput：
const choices = [
{ id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
{ id: 456, fir
浏览 9提问于2019-11-04得票数 2
回答已采纳
这是我第一次来这里，所以我希望我能说清楚！
我正在为一个项目使用React-admin，我遇到了一个奇怪的问题。我使用了一个模式，其中有两个字段，一个用于选择仓库(用于我的项目)，另一个基于所选仓库的解析位置。问题是，当我选择一个位置时，一旦选择了仓库，就会调用第二个查询，而不使用过滤器(但就在选择了一个仓库之后，会有一个很好的查询)。
示例:我选择"WHBOB"，查询正在过滤WHBOB，当我单击位置时，第二个查询不带过滤器地通过。我认为，我正在使用的状态是重置过滤器，但我不知道如何修复它…
代码：
import React, { useState } from 're
浏览 8提问于2020-07-31得票数 2
回答已采纳
我有一个带有AutocompleteInput的ReferenceInput，当我选择一个输入时，我不想让它进行另一个API调用。
<ReferenceInput
label="Message Code"
reference="plan"
source="msgCode"
>
<AutocompleteInput optionValue="msgCode" optionText="msgCode"/>
</ReferenceInput>
React-Admin在这
浏览 13提问于2018-08-24得票数 3
版本react admin: 2.9.5
我的组成部分：
<ReferenceInput
label="Клиент"
source="customerId"
reference="Customer"
alwaysOn={true}
filterToQuery={searchText => ({displayName: searchText})}
>
<AutocompleteInput optionText="displayName" /
浏览 2提问于2020-11-05得票数 0
1回答
当我按ESC键时，我想清除输入，当我第一次按ESC键时，输入没有被清除，但是当我第二次按ESC键时，它是被关闭的。
当我在控制台中显示第一次按下后输入的值时，它是空的，但不在UI中
下面是将ESC键老化的一小段代码：
Html：
<input
type="text"
:name="context.name"
:id="context.id"
v-model="context.model"
@blur="context.blurHandler"
浏览 3提问于2022-02-07得票数 0
回答已采纳
React/Redux菜鸟在这里。
我在Rest上使用Admin实现了一个管理门户。在Create组件中，我有一个选项卡式表单，其中包含用于各种表单域的TextInput组件。其中包括firstName、lastName和userName。当用户输入用户名时，我需要由firstName和lastName的前4个字符组成用户名。为了访问firstName和lastName的字段值，我尝试用redux-form修饰Create组件，但无济于事。我显然不明白redux-form是如何工作的。如何在Admin On Rest中完成上述操作？下面是我的Create组件之一：
export const H
浏览 1提问于2017-09-21得票数 1
我使用 <ReferenceInput reference={'data-systems'} source={'masterSystemId'}>
<AutocompleteInput optionText={"key"} optionValue={"id"}/>
</ReferenceInput> 我希望react-admin发送像localhost/data-systems?filter={key: <VALUE_FROM_INPUT>}一样的查询，但是！真正的查询是
浏览 7提问于2020-10-06得票数 0
我正在react-admin中处理一个项目，并尝试在ReferenceInputs中使用AutocompleteInputs来过滤列表中的内容。该列表是一种与两个不同用户(消费者和提供商)有关系的产品。我目前能够获得消费者和供应商的选择，并根据其中任何一项过滤我的产品列表。 然而，我的问题出现在自动提示上。它根本不起作用。在AutocompleteInput中键入内容不会为使用者或提供者筛选可供选择的选项。我在提供程序的ArrayReferenceInput中有另一个AutocompleteArrayInput，它的设置与之类似，自动提示运行得很好。 有什么想法吗？ 下面是坏掉的Autoco
浏览 16提问于2019-09-07得票数 0
回答已采纳
我使用了react-admin并处理了这个问题：
我应该如何创建一个引用输入的组件，而不是在表单中？
当我尝试添加它时，我得到一个错误：Error: useField must be used inside of a <Form> component
我尝试将它插入到表单中，但因为我没有道具。
我该如何处理这个问题呢？
编辑：
例如：
<ReferenceInput label="Post" source="post_id" reference="posts">
<Autocomplete
浏览 15提问于2021-06-09得票数 1
我正在使用React Admin，并试图专注于AutocompleteInput，但它对我不起作用。示例代码如下 const CreateFormCustom = (props) => {
const fieldRef1 = useRef(null);
const fieldRef2 = useRef(null);
const fieldRef3 = useRef(null);
return (
<SimpleForm {...props} redirect={false} >
&l
浏览 7提问于2020-12-18得票数 0
我正在使用react-admin创建一个站点，我使用以下代码创建了一个同时具有id和描述的AutocompleteInput，以便您可以同时搜索两者，它将过滤选项。
const choices = [
{ number: 102, description: 'Furniture' },
{ number: 103, description: 'Rugs' },
{ number: 104, description: 'Plants' },
];
const optionRen
浏览 0提问于2020-05-29得票数 0
我添加了AutocompleteInput来选择我的作者。当我在AutocompleteInput中搜索作者的名字并单击我想要显示的同一作者时，它没有显示所选的值。当我第二次这样做的时候，它显示了之前选择的值。
这是我的代码，
<AutocompleteInput source="AuthorUid" label="Author" choices={this.state.authorList}))}/>
浏览 8提问于2020-02-20得票数 0
我在我的react code.When中使用google places自动完成api，我将此代码保存在单独的文件中，并在另一个文件中调用此组件。当我在表单中将位置搜索输入字段与其他字段组合时，它不是working.Whats，当我与表单中的其他字段组合时，问题是什么？ 这段代码 import React from "react";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.autocompleteInput =
浏览 11提问于2020-07-28得票数 1
如何从1个资源中填充表单数据，然后使用react的编辑组件和SimpleForm将数据更新到另一个源？
我希望更新到源名event_source_measurement_protocol_description_updated，而不是source_measurement_protocol。，它用于填充窗体字段的当前数据。
我目前使用的是react-admin v4.1.0
export const SourceMeasurementProtocolUpdateDescription = () => (
<Edit resource="source_measurement
浏览 5提问于2022-10-24得票数 1
回答已采纳
当我们在TextField中写完一个注释时，TextField就有焦点了，当我们单击Done时什么也不会发生。第一次单击移除TextField中的焦点。第二次按下按钮结束该过程。
<TextField
id={'generalComment'}
value={comment}
label="Общий комментарий"
multiline
minRows={7}
onChange={onCommentChange}
onBlur={onCommentS
浏览 5提问于2022-03-11得票数 0
1回答
我试图使用谷歌地图地址自动完成在我的反应形式的输入。
单击它返回的地址时，不会更新输入的状态。
import React from "react";
import { Field } from "formik";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.autocompleteInput = React.createRef();
this.autocomplete = n
浏览 2提问于2022-03-20得票数 0
我想使用我的记录中的一个字段的值来过滤一些自动完成选项，但是我不知道如何获得使用它的值。
<ReferenceInput source="text_resume_template_id" reference="text_templates"
filter={{ "client_id": my_client_id_value }}>
<AutocompleteInput optionText="name" />
</Refe
浏览 6提问于2022-06-26得票数 0
回答已采纳
嘿，我是一个智能合同开发人员，第一次使用react，当我尝试使用路由器切换页面时，两个页面的数据都显示在一个页面上，我想问一下是否有某种方式第一次加载主页，当我单击另一个按钮时，另一个页面显示的数据。
App.js：
<Router>
<Link className="btn-success user-btn" to = "/user">User Login</Link>
<Link className="btn-success admin-btn">Admin Login</
浏览 3提问于2021-08-08得票数 0
回答已采纳
我使用带有<select>的react-hook-form来检测select中的更改，但是在填充select之后，该手表最初的值是错误的。 下面是一些代码来说明这个问题： import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
function App() {
const { register, watch } = useForm();
const watchFoo = watch("foo"
浏览 31提问于2021-10-14得票数 0
回答已采纳
在这里，我正在获取值，当我单击按钮时，我们如何将其更改为，任何一个人都可以帮助我使用API进行it.dynamic下拉列表。
import React,{useState} from 'react';
import axios from 'axios';
function App() {
const handleSelect=()=> {
axios
.get("https://cdndemo-api.co-vin.in/api/v2/admin/location/states")
.
浏览 6提问于2022-01-29得票数 0
回答已采纳
我一定是漏掉了什么但找不到什么
我们可以看到，我所有的结果都加载到了站点字段中，但是在字段中没有显示自动完成建议。我也尝试使用SelectInput组件，列表选项为空
在redux中，自定义查询成功：
我为创建和编辑部分编写的代码与下面的代码大致相同：
import React, {FC} from "react";
import {
CreateGuesser,
InputGuesser
} from "@api-platform/admin";
import {ReferenceInput, AutocompleteInput, Fi
浏览 5提问于2021-01-30得票数 1
我在一个输入字段上有两个事件侦听器。一个在更改时调用，另一个在google的自动完成下拉菜单上单击时调用。我的问题是，当您单击这种自动完成时，两个处理程序都会被调用，并向google api发出请求。
我试图绑定onchange事件，并在google autocomplete ajax调用触发时解除绑定它，但onchange事件是首先执行的。所以它不会被解绑。那么，有没有可能检测用户是手动输入的，还是通过自动成功输入的？我只想在用户手动输入并且没有使用自动完成下拉菜单时执行"requestlocation“函数。我尝试了其他一些像"focus-out“这样的方法，但没有成功。
浏览 0提问于2012-04-19得票数 0
回答已采纳
我想做一个地图，用户可以选择他的当前位置以及可以选择的位置，而不是他目前的location...But我得到了这个错误…“更新由管理的视图的属性'region‘时出错: AIRMap null经度”......Here我正在附加地图类代码...Please帮助我
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Animated, Platform, UIManager, TouchableOpacity
浏览 19提问于2019-07-24得票数 0
我正在尝试使用React-Admin ，它涵盖了如何链接到输入，但没有成功。
我有一个拥有用户的API端点，每个用户都有多个帐户。我想创建一个编辑/创建表单，您可以选择一个用户，然后从下一个字段下拉列表，以有可能选择一个帐户，用户有(值可以是0，1，..n帐户)。
<SimpleForm toolbar={<MyToolbar />}>
<ReferenceInput label="User Name:" source="Id" reference="users" {...rest}>
<Autocomp
浏览 7提问于2021-05-23得票数 0
1回答
我尝试在需要时以编程方式添加google api脚本。然而，我得到了一个错误，google没有被定义。我可以看到脚本被添加到body标记的末尾。
之前我已经在index.html文件中加载了脚本，但是现在我已经在应用程序的其他地方创建了一个不同的组件，它需要自己的脚本，因为它有一个不同的API键。因此，我必须从index.html中删除该脚本，因为它为多次使用该脚本提供了一个异常。现在，我想在组件加载时添加它。
请参考下面的代码了解主要组件：
import React from 'react';
import { Button } from 'reactstrap
浏览 4提问于2018-12-28得票数 1
我正在尝试将react admin集成到现有的react应用程序中，并且能够启动并运行基本的初学者页面，但是，在添加虚拟资源并在UI中单击它之后，我被重定向到http://my-application.net/[resource name]，这不正确地显示了我的应用程序错误页面。
我正在尝试在一个沙箱样的场景中设置react，以避免与我用于路由的一些自定义的东西发生冲突*而且我目前已经设置了一些东西来显示react admin在我的应用程序中的/admin路径下。是否可以告诉react admin在其所有链接(即单击资源时)的前缀使用admin ，以便我的应用程序能够正确地检测和路由这些页面以
浏览 6提问于2022-01-15得票数 0
回答已采纳
在React-Admin中，当我将子组件移动到另一个组件并尝试在simpleform标记中呈现它时，textfield没有显示它的值，textinput标记CSS也丢失了。我要做的是为创建和编辑标记创建一个公共组件，这样我就把它分解成多个组件，然后尝试使用props.children呈现它 export const AssessmentEdit = props => {
return (
<CommonComponents {...props} componentType='edit' notif='Assessment Preference Up
浏览 21提问于2020-10-09得票数 1
我正在使用react，并尝试创建一个带有自动完成字段的筛选器，该字段将在我键入时生成一个查询，并且只在搜索条件长度大于2时才开始发送查询。
我目前在我的shouldRenderSuggestions字段中使用AutocompleteInput，但是在“昵称”过滤器中仍然发送两个带有空字符串的请求，这是代码部分：
<AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
return val.trim().length > 2
}}/>
浏览 0提问于2019-03-11得票数 7
回答已采纳
1回答
我刚在我的bokeh应用程序中创建了一个自动完成输入小部件。
自动完成只适用于第一个单词，而不是其他单词。
我不能使用箭头键在建议列表中导航，列表项不可单击。
从bokeh.plotting导入显示，output_notebook，output_file从bokeh.models.widgets导入AutocompleteInput
output_notebook()
input_widget =AutocompleteInput(完形=‘pok’，'wer'，'foo'，'bar'，'baz'，title='te
浏览 1提问于2019-03-07得票数 1
我正在尝试创建一个注册表单，输入一个用户地址。地址输入使用google自动完成地址api。
我希望能够将它保留为Formik字段，这样我就可以使用Yup验证了。
地址输入组件看起来像
// Google.jsx
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
浏览 4提问于2022-03-19得票数 1
我正在尝试从TextInput字段和创建的时间戳到Firebase实时数据库的数据。然而，当应用被加载时，第一次点击提交只提交textInput，而不是“时间戳”。 这是该文件的一个简单版本， import React, { Component } from 'react';
import { View, Text, TouchableHighlight, StyleSheet,
ImageBackground, TextInput, Alert, Picker, TouchableWithoutFeedback,
Keyboard } from 'react
浏览 25提问于2019-05-09得票数 1
回答已采纳
1回答
我已经用React Router以以下方式设置了React-ga：
...
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import {Provider} from 'react-redux';
import ReactGA from 'react-ga';
ReactGA.initialize('MY TRACKING CODE', {
debug:
浏览 20提问于2018-02-27得票数 1
回答已采纳
1回答
我正在尝试抽象一个Google Places自动完成输入组件，以便多次使用它。
但是，当我实例化多个以下组件时，数据和方法会重叠。(记录相同的place )
<template>
<input :ref="inputRef" type="text">
</template>
<script>
var autocompleteInput
export default {
props: ['inputRef'],
methods: {
fetchAddress() {
浏览 2提问于2017-01-23得票数 2
回答已采纳
1回答
当我打开模式对话框时，将打开第一个自动完成控件的选择面板，并试图关闭该面板，如下所示：
html：
<mat-form-field>
<input
#autoCompleteInput
matInput
type="text"
[matAutocomplete]="auto"
>
<mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption="true" [displayWith]="
浏览 3提问于2020-12-04得票数 0
我需要在第一次渲染时得到cookie值。我在_app.tsx里买的。一切看起来都很好(正确呈现html)，但我得到了服务器/客户端不匹配警告，因为在服务器上的第一次呈现时，cookies是未定义的，该值返回到默认值0。水化后，从cookie中提取值并正确显示。
有人能向我解释一下，为什么服务器上的值是默认值(因此，为什么我会得到这个警告)，有什么更好的方法来编写这段代码？
我的_app.tsx
import React, { useState, useEffect } from 'react'
import type { AppProps } from 'next/ap
浏览 1提问于2020-12-22得票数 2
回答已采纳
1回答
我正在使用以下包为我正在开发的应用程序创建一个自动完成解决方案：
我试图通过传递material Component组件，在react autocomplete元素上使用Component支柱。
直接从MUI传入TextareaAutosize
import {TextareaAutosize} from '@material-ui/core';
<AutocompleteInput Component={TextareaAutosize} />
这是有效的，但我没有任何控制的道具，它得到。
通过自定义组件实现，这样我就可以添加道具
const
浏览 3提问于2020-03-25得票数 2
回答已采纳
当我使用自定义创建页面时，无法正确显示。怎么修呢？您可以在代码沙箱中看到以下内容。访问
输入标签列表
单击“创建”按钮，输入“创建”页面。
见post的输入。
<Create title=" " {...props}>
<SimpleForm toolbar={<TagCreateToolbar onCancel={onCancel}
/>}>
<TextInput source="name" validate={required()} />
浏览 0提问于2019-09-09得票数 0
我和茉莉花进行了单元测试，我得到的是
TypeError: Cannot read property 'addEventListener' of null
真正的密码是..。
ngAfterViewInit() {
this.autoCompleteInput = <HTMLInputElement>document.querySelector('.search-input');
this.autoCompleteInput.addEventListener('blur', this.onBlur.bind(t
浏览 4提问于2021-04-19得票数 0
我有下面的示例react.js代码：
const cache = new Map();
const retrieveData = (fileName, data) = {
const data = cache.get(fileName);
if (data === undefined) {
data = someDataRetrievingFunction();
cache.set(fileName, data);
return data;
}
return data;
}
function Ref({fileN
浏览 6提问于2022-03-18得票数 0
我有一个关于使用.then和useEffect获取API顺序的问题。我会尽我最大的努力向你们解释，得到一些有用的建议。
守则的预期结果：
在第一次加载时(当第一次访问站点时)，我希望索引为1的口袋妖怪出现为默认状态(因此，我将状态变量"pokemonIndex“的默认值设置为1的原因)。
每次单击将切换toggle()函数的按钮时，它都会呈现getRandomIndex()函数，更新将运行useEffect的状态变量"pokemonIndex“。
useEffect将使用更新的${pokemonIndex}获取一个新的API。
代码的其余
浏览 9提问于2022-03-08得票数 0
回答已采纳
我是第一次使用React Admin，我的用户(来自mongoDB)显示得很好。当我单击特定用户的“编辑”(或“删除”)按钮时，问题就出现了:它显示"GET http://localhost:3002/api/users/2a1a3a61-f73b-4a01-b609-ae4bb815f59e 404 (未找到)“ 我使用"http://localhost:3002/api/users“向mongoDB发出GET请求："app.use('/api/users'，require(‘./api/GetUsers’)”，"2a1a3a61-f73b-
浏览 21提问于2021-05-11得票数 0
回答已采纳
我在React应用程序中用react-chartjs-2创建了一个图表。我的主页上有两个项目："chart1“和"chart2”。当我点击"chart1“时，图表显示没有数据。在第二次单击后，数据将正确呈现。接下来，我想呈现"chart2"，但在单击该项目后，"chart1“呈现。在第二次单击后，"chart2“的数据可以正确呈现。你知道问题出在哪里吗？我希望在第一次单击后呈现每个图表。 Chart.js import React, { useEffect, useState } from 'react';
import
浏览 15提问于2020-12-03得票数 1
我很喜欢使用react，而且这个前端对于一些仪表板开发来说是多么的有希望，
我遵循了一个教程-admin+回环4，并尝试使用ReferenceInput +自动建议过滤长列表，如这里所述。
部门列表正确地显示在下拉列表中，如果我选择了一个项目，列表就会像它应该的那样被过滤，但是如果我输入，结果是一个空下拉列表，结果是"No选项“。
在传递列表之前，我必须先在某个地方填充它吗？还是我漏掉了什么？下面是我试图按部门筛选的机器列表的一个示例。
非常感谢
const machineFilters = [
<ReferenceInput
source=
浏览 17提问于2022-10-22得票数 0
2回答
我有一个snack bar component，它会显示几秒钟的祝酒词，然后消失。我有一个App component，它包含一个button，在单击该button时，我想控制snack bar component。在第一次单击时，snack bar会显示得很好，并在指定的时间结束后消失。但是当我再次点击它时，snack bar就不会出现了。我每次都将show state初始化为true，但是snack bar没有出现。请告诉我哪里出了问题，以及如何纠正。下面是文件。我用一个定制的钩子来控制小吃店的外观行为。
App.js
import React, { useState } from "
浏览 4提问于2020-10-04得票数 1
回答已采纳
我在index.html页面中有一个JS全局变量，我需要在react JS应用程序中调用这个变量，我尝试将结果存储在本地存储中，然后从react应用程序中调用它，第一次在react应用程序中调用localstorage时返回"null“值，但是如果我刷新页面显示的值，我如何从第一次获取值，而不刷新页面？！
<script>
var langObject='';
$.getJSON('http://getJSON.com/en', function(data) {
langObject = data;
localStorage.
浏览 1提问于2016-12-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
