如何在react中使用select实现动态
在React中使用select实现动态选项的方法如下：
- 首先，你需要在React组件中定义一个状态变量来存储
select的选中值和选项列表。可以使用useState钩子函数来创建状态变量。
import React, { useState } from 'react';
function MyComponent() {
const [selectedValue, setSelectedValue] = useState('');
const options = ['Option 1', 'Option 2', 'Option 3'];
// 其他组件代码...
return (
<select value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
{options.map((option, index) => (
<option key={index} value={option}>{option}</option>
))}
</select>
);
}- 在
select元素中，使用value属性将选中的值与状态变量selectedValue绑定，使用onChange事件监听选项变化，并通过setSelectedValue更新选中的值。 - 使用
map函数遍历选项列表options，为每个选项创建一个option元素，并设置value属性为选项的值。
这样，当用户选择不同的选项时，selectedValue的值会更新，从而实现了动态选择。
注意：以上代码只是一个简单的示例，实际应用中，你可能需要根据具体需求进行适当的修改和扩展。
相关·内容
2回答
我已经看到了用于动态导入的webpack (参见下图)，但这在react中似乎不起作用，因为我们在React中直接返回组件，而不是在DOM中添加元素(之后是承诺的元素())。
在中，它们展示了如何只加载其他响应组件，而不是如何动态导入NPM库。
所以如果有人能解释如何动态导入npm模块，那就太好了。
浏览 15提问于2022-05-06得票数 0
回答已采纳
我正在使用react-select库来显示一个选择框。我之所以使用Select.Async，是因为我需要从API中提取选项。我在loadOptions中使用Select，它在初始页面渲染期间工作。但是，我也在使用redux-form，它可以动态地更改Field的值(使用change)。然而，当我像这样改变字段的值时，输入的值确实改变了(我可以验证这一点)，但是react-select的loadOptions再也不会被调用了(即使我认为它应该监听值的改变)。我的问题是，有没有一种方法可以在每次输入值改变时动态调用loadOptions？
谢谢,
编辑:在github 上回答
浏览 3提问于2017-07-29得票数 2
1回答
在spring data中，如何做一些事情，比如
@Query("select code from :entityName where id= :id")
public String getGenicName(@Param("entityName") String entityName, @Param("id") String id)
为了动态绑定实体的名称，现在我使用：
字符串查询= em.createQuery("select code from "+ entityName +“where id= "+ d).getS
浏览 2提问于2017-01-06得票数 0
我使用ReactJS使用DOM呈现数据，我可以在与以下相同的页面中创建动态对象：
return (
React.createElement('form', {onSubmit: this.onSubmit, className: 'ContactForm', noValidate: true},
React.createElement('input', {
type: 'text',
className: errors.name && 'C
浏览 1提问于2017-08-29得票数 1
我试图在React-admin的列表视图中呈现动态生成的字段。只要我们将每个字段硬编码传递给Datagrid，它就工作得很好，但我想显示字段(TextField、DateField等)。动态地基于每个字段的类型。
为此，我创建了一个名为<RenderType/>的组件，它将具有每行字段的对象作为支撑，并动态返回React-admin组件(TextField、DateField )，但它不会显示在不同的列中，但它会将所有结果放在一列中。
import React from 'react';
import { List, Datagrid, TextField, Edi
浏览 1提问于2019-12-13得票数 2
这很奇怪。在我试图拆分代码时，我遇到了这样的情况：
const g = "bi";
const importStr = `react-icons/${g.toLowerCase()}`;
console.log(importStr);
console.log(importStr === `react-icons/bi`);
import(importStr).then(module => {
console.log(module);
});
import(`react-icons/bi`).then(module => {
console.l
浏览 1提问于2021-08-20得票数 1
回答已采纳
1回答
我是React.i有一个场景，有一个select语句，在用户从下拉列表中选择一个选项时有四个options.based，我需要在一行中创建一个动态输入字段，并将它附加到一个包装器元素中。我正在创建的动态字段对于四个options.the用户来说都是不同的，它们都能够添加输入字段和删除输入字段，就像您在这里看到的那样。
但是在上面，我们可以添加和添加相同类型的输入fields.in，我的情况下，动态字段将基于选项selected.so专家，请指导我如何在Reactjs中实现这个特性。
浏览 2提问于2016-05-06得票数 0
回答已采纳
我正在试图弄清楚如何在我的ios应用程序的React-Native WebView中禁用文本选择。在站点上使用设置为none的css样式user-select在使用设备或模拟器时似乎不起作用，但它在浏览器中确实起作用。有没有办法使用React-Native WebView禁用它，或者我需要使用一些本地代码来实现这一点？
使用React-Native 0.30，iOS 9-10
浏览 12提问于2016-11-29得票数 3
如何在react导航中给出动态初始路由名？如果单元存在，我们必须重定向到另一条路由，否则我们必须将用户带到另一条路由。
注意:我正在创建一个底部标签导航器，我必须在其中设置到特定底部标签导航器的初始路线。
(不是身份验证流)
import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-
浏览 1提问于2020-02-18得票数 1
我想做一个多过滤器，以便用户可以删除任何项目，直到项目长度为1。我想在下面的例子中，当用户删除3个项目中的2个项目时，在对象中动态添加isFixed = true。 import React, { useState } from 'react';
import Select from 'react-select';
const options = [
{ value: 'apple', label: 'Apple' },
{ value: 'orange', label: 'Orange
浏览 34提问于2021-09-13得票数 0
我是react框架的新手，我正在动态创建组件(textbox，checkbox & select)，我想在提交表单之前对其进行验证。有没有人能提个建议？
浏览 2提问于2015-02-23得票数 4
import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
const Example = () => {
const options = [
{ label: "Grapes", value: "grapes" },
{ label: "Mango", value: "mango" },
{ label: "Strawbe
浏览 47提问于2021-06-18得票数 0
回答已采纳
2回答
默认情况下，我想选择第一个切换按钮
import * as React from "react";
import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material";
export default function ToggleButtons() {
const data = [
{ name: "a", title: "hello1" },
{ name: "b", title: "hello2" },
{
浏览 7提问于2022-05-20得票数 1
回答已采纳
下面的react代码不起作用。“select”函数总是以10而不是赋值的形式调用。
select( x ) {
alert( x ); // Always alerts 10.
}
render() {
var AllData = [];
for( var i = 0; i<10 ;i++ ) {
AllData.push(
<div key={i} onClick={() => this.select(i)} >{i}</div>
);
浏览 1提问于2016-10-11得票数 0
回答已采纳
我正在开发react-select库，面对一些问题，我正在使用redux-form库并从其中导入<Field />组件。这样我就可以通过表单提交值到服务。
下面提到的代码可以很好地工作，当我使用默认的<Select>从react select。我可以从下拉列表中选择值，即使焦点突出，值也会被选中，值将保持不变。但是由于redux-form，选定的值不是通过表单提交的，这就是为什么我要包装<Select />组件并与<Field name="sample" component={RenderSelectInput} id="sam
浏览 4提问于2017-03-07得票数 15
我想从列表中动态呈现选项。如果已经使用了选项，我希望将其标记为isUsed: true。我的意思是改变<Wrapper />的状态
this.state = {
options: {
One: {value: "one", isUsed: false},
Two: {value: "two", isUsed: false},
Three: {value: "three", isUsed: false}
}
最好的方法是什么？
我试图使用componentDidMount()使用markUsed()来标记
浏览 2提问于2019-08-03得票数 0
我想显示一个动态select，在react组件中的值在1到100之间。
在角度2中是
<select>
<option *ngFor="let i of numbers">{{i}}</option>
</select>
<!--numbers is an array [1,2,3,4,...100]-->
这在React中是怎么回事？
浏览 0提问于2017-04-28得票数 23
回答已采纳
我正在尝试将我的应用程序从React 0.12迁移到React 0.14，但使用option元素时遇到了问题，这些option元素使用放置在select标签内的 FormattedMessage对象。
下面是一个示例JSX代码：
<select>
<option value="value1"><FormattedMessage message={this.getIntlMessage('key1')}/></option>
<option value="value2"><Forma
浏览 22提问于2015-10-31得票数 11
我想使用富文本编辑器，但我找不到在react function base components中使用的任何信息文档，.I使用了draftjs的wysiwyg编辑器，文本编辑器显示为。
the文件的代码是
import React, { useContext, useEffect, useState } from 'react'
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { Editor } from
浏览 14提问于2022-06-06得票数 0
1回答
我想添加标题上的反应-选择框的选项值动态，我使用的反应-选择库在此。
代码:
import * as React from 'react'; import Select from 'react-select';
import { Dispatch } from 'redux';
import { QUICK_FILTER_TYPES } from '../../constants';
import { setQuickFilters } from '../../redux/actions';
import
浏览 0提问于2018-09-03得票数 2
我正在使用react，如何创建从0到100%的下拉显示号？
我的落脚点：
import React, { useState } from 'react'
import Select from 'react-select';
import Tag from './Tag'
export default function Dropdown({ className, options, styleSelect, defaultValue}) {
const [selected, setSelected] = useState(defaultVa
浏览 4提问于2022-05-16得票数 0
回答已采纳
2回答
这是一个由Vite & React & antd组成的项目。
我想在vite.config.ts中动态地处理antd主题。
如果您能告诉我如何修改React组件中的less.modifyVars值，我将不胜感激。
这是当前的屏幕。
/
在暗模式下，选择组件的样式不能正常工作。
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessor
浏览 31提问于2021-09-03得票数 4
回答已采纳
如何能够同时拥有一个preloadedState (来自服务器的水合)和动态注入减速器？
在react-boilerplate或中，根据正在查看的页面/组件动态添加还原器的概念。reducers.js提取液
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});
}
虽然这在从一个页面导航到另一个页面(或者仅在客户端应用程序上)时运行良好；但是当从服务器获取数据时，我遇到了以下错误：
Une
浏览 0提问于2018-12-12得票数 0
回答已采纳
我是React和Redux的新手，我想创建一个的React/Redux实现。我想创建常量，比如MAX_BOARD_SIZE = 50，并创建一个包含从1到MAX_BOARD_SIZE的所有数字的选择框。更改电路板大小时，电路板大小将自动更改。但是我不能在我的SelectBoardSize呈现函数中创建for循环。下面是我的代码：
import React from 'react';
class SelectBoardSize extends React.Component {
render() {
return (
<se
浏览 0提问于2017-03-23得票数 3
回答已采纳
1回答
其思想是在登录后从服务器获取一个配置JSON。根据配置(比方说用户所链接的公司)，使用其中一种预设样式。前端是基于React的。因此，我不能通过id获取主样式标签，并动态地更改它：
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
document.getElementById('theme_css').href = '../red.css';
浏览 3提问于2017-12-01得票数 0
5回答
我有像这样的依赖域
<List>
<select>
<option></option>
<option></option>
</select>
<select>
<option></option>
<option></option>
</select>
<input />
</List>
如果我有5个<
浏览 7提问于2016-02-03得票数 16
我想知道是否可以使用react图标和选择选项元素。我搜索了很多关于这个问题的内容，但是所有的解决方案都与react select库有关，而不是简单的选择选项元素。
以下是我正在做的事情
import {ReactIcon} from "react-icons";
.............
some code here
.............
<select>
<option> sometext <ReactIcon /> </option>
<option> sometext <Reac
浏览 2提问于2021-11-24得票数 1
我在一个使用react导航库的react-native项目中有一个堆栈导航器。最初，我不想显示任何标题。在即将到来的屏幕上，我希望显示一个动态标题。因此，在我的导航器配置对象中，如下所示： const authStackConfig = { initialRouteName: 'Login', headermode: 'none' }; 在屏幕实现上，我有 static navigationOptions = {headerMode:'screen'} 但是headerMode不是navigationOption属性... 我尝试将导航器配置选
浏览 62提问于2020-01-13得票数 0
2回答
在我的react应用程序中，我使用react路由器-dom进行路由，有将近5000页(这些页面是基于API动态生成的)，现在我不知道如何为这些动态页面生成一个站点地图。
来自“我的路线”组件的代码段
<Route
path={process.env.PUBLIC_URL + '/genres/:name'}
exact
component={MovieGenre}
/>
<Route
path={process.env.PUBLIC_URL + '/discover/:name'}
exact
component={Di
浏览 2提问于2021-06-24得票数 5
回答已采纳
我正在制作一个动态表单组件，它从用户那里获取输入并以JSON格式存储，然后为最终用户创建一个表单。我必须动态地添加值来选择标记选项，但是有一个错误即将到来: TypeError: data.emplist不可迭代
const addNewEmp=()=>{
61 | setEmpList((data)=>({
62 | inputValue: '',
> 63 | emplist: [
| ^ 64 | ...data.emplist,
浏览 6提问于2022-06-10得票数 2
回答已采纳
我用的是反应台。我正在调用API (.NET)上的一个方法，它连接了一些字段，现在我需要在react表列中显示这个连接字段。
在API中，我尝试将/n放在列中，以便它在UI上呈现一条新行(在react表中)。但没有运气。示例:我需要显示
此字段是通过添加两个数字10和20来计算的。由于结果大于15，所以不能执行此操作。
在显示的文本中，我想要的是“既然”应该从react表中的新行开始。
我试着把{'\n'}放在“开始”之前，但它没有起作用。有什么办法可以做到吗？
浏览 0提问于2019-03-17得票数 3
我刚刚开始学习flutter，我很好奇如何在flutter中动态地setState() 在React Native中，我通常会使用下面这样的函数来动态setState： class foo extends React.Component{
state={
username:null,
password:null
}
toggleSetState(whatState, value){
this.setState({ [whatState]: value })
}
render() {
return (
<View>
浏览 11提问于2019-04-10得票数 1
回答已采纳
我使用的是react-select控件。下拉列表中显示的项目是固定项目和动态添加项目的组合。 我希望能够通过在标签旁边添加一个图标，直接在下拉面板中删除动态生成的项目。当点击时，这将删除该项目。 我知道以编程方式添加/删除项目的代码。这只是一个更新状态的例子。我的问题是如何将UI添加到react-select下拉面板中，并在它被点击时触发一个click事件。
浏览 19提问于2019-09-03得票数 1
我正在构建一个使用AISHub的船视觉器。我能够用纬度/经度定位我想要的船只，并在地图上显示出来。然而，有太多的船(标记)，我不知道谁是谁。
The problem：如何在单击下面的标记后动态显示弹出窗口？
下面是我使用的代码中最重要的部分：
class BoatMap extends Component {
constructor(props) {
super(props);
this.state = {
buttonEnabled: true,
buttonClickedAt: null,
浏览 4提问于2020-02-20得票数 1
回答已采纳
我想知道使用React.lazy()这样的“声明”动态导入有什么区别：
const Component = React.lazy(() => import('./Component'));
或者使用webpack的动态导入来完成它，如下面所解释的：
(在我的例子中，我计划在webpack做捆绑)
浏览 0提问于2020-05-14得票数 5
回答已采纳
2回答
当我在一个get请求中从数据库获得一万多个原始数据时，响应需要很长时间才能到达客户端。
有办法将这些数据排成小块到客户端吗？
当向客户端发送大量数据时，客户端必须等待请求完成才能使用该数据。
这会导致客户端出现滞后。每次客户机重新加载页面时，都会发出请求，客户端将等待10s的数千个数据到达客户端。
当客户端发出GET请求时，我希望将其作为小数据块发送，客户端在完成来自服务器端的请求时立即接收数据，
这就像流数据，有这样的东西，我可以用来实现上述逻辑吗？
示例代码
/**
* SERVER SIDE DASHBOARD ENDPOINT
*/
import { Request, Respon
浏览 1提问于2021-06-26得票数 0
我试图从放置在外部存储中的js文件中动态导入一个类组件，
sample.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
var HeaderComponent=eval(`class HeaderComponent extends Component {
constructor(props) {
super(props);
}
render() {
return <Text&
浏览 3提问于2020-06-29得票数 1
1回答
在屏幕上反应原生轻击
、、、
我需要一些东西来点击/点击一个反应原生应用程序中的元素动态使用代码。有什么建议吗？有节点模块吗？类似于Javascript HTML DOM click()，但是在react原生中？
浏览 3提问于2020-08-24得票数 1
1回答
我正在建立一个扫描qr代码的网站。这在桌面上很好，但在移动设备上却不起作用。在Reactjs中，这适用于安全连接。但是在Nextjs中，这不适用于安全连接。我在Nextjs中运行自定义服务器。
这是我的密码。
import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
const Home = (props) => {
const [data, setData] = useState('No result');
浏览 8提问于2022-07-17得票数 0
下面是手动生成选项的代码。有没有办法从数组或json动态填充选项？ return React.createElement("select", {},
React.createElement("option", {value: "A"}, "Option A"),
React.createElement("option", {value: "B"}, "Option B"),
React.createElement("option&
浏览 60提问于2021-07-16得票数 1
回答已采纳
我在react-final-form中使用react-select，并且需要两个select，其中第一个select中的selected选项动态地设置第二个select中的选项。例如，如果在第一次选择中选择了选项一，则第二次选择将获得选项一A和选项一B。 这些选择在数组中使用。这是我的代码和初始设置https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14。 我发现了两个类似的示例，但我不知道如何使它们适应我的用例。 首先，我为react-final-form找到了this example，它使用creat
浏览 16提问于2019-10-17得票数 1
回答已采纳
我有一个基本的下拉设置，如下所示：
(显然，在现实世界中，fetchValues()将转到服务器)：
import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
const fetchValues = () => Promise.resolve(["option1", "option2"]);
function Dropdown(props) {
const [options, setOptions] =
浏览 0提问于2019-11-20得票数 1
我想分享用户的信息为我的应用程序的所有屏幕。(例如，类似于webapps中的会话)。我如何在react-native中以适当的标准方式实现这一点。
到目前为止，我通过将用户的所有信息作为状态保存在主组件中，然后将主组件的状态作为属性传递给子组件，从而实现了这一点。下面是组件的简短代码：
var MainComponent = React.createClass({
getInitialState: function(){
return {
user: {
mobileNumber: "",
emailId:"
浏览 0提问于2015-12-11得票数 5
1回答
我是非常新的react.js。我使用react-select作为下拉菜单，并带有一个用于onClick操作的按钮。我在获取要动态更新的URL时遇到了问题。例如，用户在下拉菜单中选择Netflix，然后单击选择按钮，它会将他们重定向到Netflix URL。如何使用带按钮的react-select动态更新URL链接。 import Select, { components } from 'react-select';
import { Link } from "gatsby"
import homePageStyles from './home-page
浏览 17提问于2020-04-12得票数 0
我对Java很陌生，从Spring和开始，所以我知道如何获取数据的两种方法：
通过Repository层，用文字方法命名: FindOneByCity(String )；
通过自定义回购，带有@Query注释：@Query('select * from table where city like？?')；
这两种方法都是静态设计的。
如何获取运行时必须构建的查询的数据？
，我想要实现的是，可以在不接触代码的情况下创建动态报告。表将记录带有名称的报表和具有默认参数的SQl查询(如begin_date、end_date等)，但具有不同的主体。示例：
"Sal
浏览 0提问于2018-02-06得票数 4
回答已采纳
我已经在我的nodejs应用程序中安装了ReactJs模块，因此React出现在node_modules目录中。但是我不能在客户端javascript中使用它，因为没有引用。
那么，添加这样一个引用的最佳方式是什么呢？(当然，我可以手动地将react.js脚本复制到脚本文件夹中，并手动添加引用，但是它会导致代码复制，看起来很难看)
浏览 3提问于2015-03-02得票数 3
回答已采纳
一般来说，React允许我使用各种类型的FormControls：
// Input field
<FormControl
type="text"
placeholder="Placeholder text"
value={this.props.value}
inputRef={(ref) => this.inputfield = ref}
/>
// Dropdown menu
<FormControl componentClass="select"
defaultValue=
浏览 0提问于2019-02-04得票数 0
2回答
我使用react创建了一个select选项--按照下面的示例代码选择。
有一个数组对象来存储这样的选项：
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
现在，我想让它动态地存储来自其他数据的值，并使它在对象上迭代。
就像这样：
const
浏览 0提问于2019-04-11得票数 7
回答已采纳
我尝试在我的rails应用程序中集成rails-assets.org中的react组件。目前，我使用react-rails gem在我的应用程序中编写react视图。
我想使用其他的react组件，比如react-router、react-select等等。我找到了一个简单的方法，那就是使用rails-assets.org。但是，我不知道调用这个组件的正确方式。有人能教我吗？
例如，我希望在我的rails应用程序中集成react-select：
Gemfile：
gem 'rails-assets-react-select','~> 1.0.0.rc.3'
浏览 0提问于2017-04-19得票数 0
我想在React中动态导入和呈现一个组件。有两个组件，第一个是Dashboard，第二个是Home，所以基本上，我想在Home中动态呈现Dashboard组件，而不是预先导入它，或者可能在Home组件的渲染功能中导入。
Dashboard.js
class Dashboard extends Component
{
render()
{
return( Dashboard Content Goes Here...! )
}
}
export default Dashboard;
Home.js
import React, {Component} from ‘react’;
c
浏览 3提问于2019-05-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
