onChange在reactstrap自定义输入开关中不起作用
在reactstrap自定义输入开关中，onChange是一个事件处理函数，用于在开关状态发生改变时执行特定的操作。然而，有时候在自定义输入开关中使用onChange可能不起作用的原因可能有以下几点：
- 绑定事件错误：在使用onChange时，需要确保正确地绑定事件。通常，可以通过将onChange属性设置为一个函数来绑定事件，例如：onChange={handleToggle}，其中handleToggle是一个定义好的函数。
- 组件状态未更新：如果onChange事件处理函数中没有正确地更新组件的状态，那么开关状态的改变可能不会被正确地反映出来。在事件处理函数中，应该使用setState或类似的方法来更新组件的状态，以便重新渲染组件并反映出开关状态的改变。
- 使用错误的属性：有时候，在自定义输入开关中，可能会使用错误的属性来绑定事件。在reactstrap中，正确的属性是onToggle，而不是onChange。因此，应该使用onToggle属性来绑定事件，例如：onToggle={handleToggle}。
总结起来，如果在reactstrap自定义输入开关中的onChange不起作用，可以检查是否正确地绑定了事件，是否正确地更新了组件的状态，并确保使用了正确的属性来绑定事件。此外，reactstrap还提供了其他一些有用的组件和功能，可以根据具体需求选择合适的组件和相关产品。
相关·内容
代码： import { CustomInput } from 'reactstrap'
...
const changeMediaStatus = (e) => {
console.log(e)
}
...
<CustomInput
type="switch"
className="ml-auto mr-1"
onChange={(e) =>changeMediaStatus(e)}
/> 在上面的代码中，在"onChange“属性处分配的函数不起作用。而且，带有onChange属性的C
浏览 19提问于2021-06-15得票数 0
回答已采纳
我想用Reactstrap来缩短输入元素的宽度，我该怎么做呢？
我已经尝试将bsSize设置为small，但仍然不起作用
<InputGroup>
<Input
type="text"
name="searchTxt"
value={props.searchText}
onChange={props.updateSearchText}
placeholder="Type keyword here..."
size=
浏览 36提问于2019-10-23得票数 0
我希望通过ReactStrap函数从onChange输入组件获得一个类型化的值。目的是只使用text输入，但能够获得特定的类型化值(下面示例中的字符串或数字)。
<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChang
浏览 1提问于2017-12-12得票数 6
回答已采纳
我正在尝试编写一个Android代码来为Android开关创建三个状态。三个状态表示开-默认-关。
当我打开我的应用程序时，开关将处于默认模式，按钮将位于中心。当我将开关拖到左侧时，状态将变为开，当我将开关拖至右侧时，状态将变为关。
在Android交换机中，我们有两种状态:开/关。我找不到任何技术来将第三种状态添加到开关中。
如何在Android Switch中添加第三个状态？
浏览 18提问于2014-05-09得票数 6
1回答
我正在使用Reactstrap创建一个可重用的组件。我想要做的是在输入字段中显示一个图像，如下所示
发生的是这个
如何把图像放到前面？？
InputFieldWithImage.js
import {
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Button
} from 'reactstrap';
import { Form, FormGroup } from 'reactstrap';
import Amy from './../../assets/ima
浏览 0提问于2021-01-05得票数 0
回答已采纳
如何将Reactstrap输入的值设置为空？我使用的代码是这样的。
handleChange = (event) => {
this.setState({message: event.target.value});
};
<输入onChange = {this.handleChange}/>
另外，获取输入值的最佳实践是什么: refs还是onChange？
浏览 0提问于2019-06-29得票数 1
2回答
我试图使用if/else语句验证React组件中的电话号码输入。我想显示一条信息(“请检查电话号码”)，如果用户键入字母而不是数字。到目前为止，我能够创建一个函数，该函数检查输入值是否仅为数字，但如果用户输入字母，则无法确定如何显示消息警报(如在Bootstrap/reactstrap中)。
我的代码是
import React, { useState } from "react";
import { Alert } from "reactstrap";
export default () => {
const [number, setNumber]
浏览 2提问于2020-05-12得票数 1
回答已采纳
我喜欢Reactstrap处理Modal的方式，所以我想继续使用它，但是我不知道如何从表单中获取数据并在状态下捕获它。
const handleSubmit = (evt) => {
evt.preventDefault();
alert(`Submitting Name ${name}`);
};
带反应带的
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label for="firstname">First Name</Label>{'
浏览 6提问于2020-09-12得票数 1
回答已采纳
我正在尝试制作一个可重用的输入组件。当数据输入时，我希望在使用可重用输入组件的相同位置处理这些输入数据。而不是把它当做道具。我得到一个错误，Uncaught TypeError: Cannot read property 'value' of undefined谁能给我一些关于如何在这样的实例中处理数据的想法？ InputFieldWithImage.js import React, {useState} from "react";
import { Form, FormGroup, Input } from 'reactstrap';
fu
浏览 18提问于2021-01-05得票数 0
回答已采纳
2回答
在reactstrap中，我们可以设置默认样式的颜色(如主、次、成功、警告...)但是我如何用十六进制的颜色代码来改变它呢？例如，如何将“警告”更改为“#008080”？ <AppSwitch
className={'mx-1'}
variant={'pill'}
color={'warning'} //it dones't work with {'#008080'}
default checked
onChange={this.handler} /> 我也尝试过这样的方法，但也不起作用：
浏览 32提问于2019-05-31得票数 2
2回答
const FindEmail = () => {
const {userEmail, setUserEmail} = useState('');
const onChangeEmail = (e) => {
setUserEmail(e.target.value);
};
return (
<Input className="inputEmail" value={userEmail} onChange={onChangeEmail}>
);
}; TypeEr
浏览 5提问于2021-04-22得票数 0
回答已采纳
我有一个包含以下输入元素的react组件： import React, {
Component
} from 'react';
import {Input } from 'reactstrap';
constructor(props) {
super(props)
this.test = React.createRef();
}
render() {
console.log(this.test.current)
return (
<Input ref={this.t
浏览 16提问于2019-03-15得票数 4
回答已采纳
我在我的项目中使用了reactstrap customswitch。如何更改标签开/关？ const ProfileSwitch = ({title, text, name, id, label}) => {
return <div className="profile-switch">
<div className="profile-switch__text">
<p>{title}</p>
<span>{text}<
浏览 19提问于2020-12-04得票数 1
回答已采纳
2回答
我试图将react-hook-form添加到reactstrap表单和输入中，但看起来包之间存在冲突。
import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import {
Button,
Form,
Label,
Input
} from 'reactstrap';
import { FormControlLabel, Checkbox, FormGroup } from &#
浏览 2提问于2021-03-11得票数 0
回答已采纳
1回答
我在试着建立一个表格。
我有一个Class extends React.Component，它包含这样一个constructor：
constructor(props) {
super(props);
this.state = {
name: '',
dataId: '',
isactive: '',
};
this.handleCreateChange = this.handleCreateChange.bind(this);
}
这是表单提交后执行的方法。
(我使用调度来执行
浏览 3提问于2020-01-25得票数 0
回答已采纳
在使用reactstrap的页面上，我有一个复选框，当选中此复选框时，我希望启用输入字段，如果未选中，则输入字段被禁用。我该怎么做呢？这是我目前的代码：
import {
Input,
FormGroup,
FormText,
Form,
Label,
Button,
} from "reactstrap";
function HelloWorld() {
let mpinput;
if ((e) => e.target.checked === true) {
mpinput = &l
浏览 3提问于2021-08-27得票数 1
回答已采纳
我在我的项目中使用Reactstrap，它目前只有两个独立的输入(日期和时间)。有谁知道一个与MongoDB格式(2021-01-01T00:00:00.000+00:00)兼容的日期时间选择器。Reactstrap没有，html的datetime-local类型似乎不起作用
浏览 0提问于2021-04-27得票数 0
1回答
我正在试图覆盖reactstrap输入组件的颜色，目前它看起来如下
这就是我的实现：
<Input
invalid={formik.errors.password ? true : false}
className="login-input"
id="password"
name="password"
placehol
浏览 0提问于2021-11-16得票数 0
回答已采纳
当我得到以下错误时，我正在使用React。
TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function
我该怎么解决这个问题？我已经添加了下面的代码。
import React from 'react';
import LoginForm from './loginForm'
import useState from "react"
function LoginPage(){
const[details, setDetails] = useSt
浏览 6提问于2019-12-02得票数 11
回答已采纳
使用Reactstrap进行简单的样式设计，我使用他们的<Input>组件，我已经构建了表单，但它不允许文本输入。当输入字段时，控制台将引发此错误：
我已经设置了组件，表单的其余部分正在正常工作：
constructor(props) {
super(props);
this.state = {
firstName: "",
preferredName: "",
middleName: "",
lastName: "",
addres
浏览 0提问于2018-11-01得票数 0
回答已采纳
代码：
import React, { Component } from 'react';
import { Button, Input, Row, Col, Label } from 'reactstrap';
export default class Settings extends Component {
constructor(props) {
super(props);
this.state = {
tallyPort: '', companyYear: '
浏览 0提问于2017-06-16得票数 2
回答已采纳
1回答
我使用的是reactstrap组件。有多个输入。如何将某些字段设置为必填。也就是说，用户不能传递空闲。怎样才能有这样的限制呢？
<Row>
<Col xs="2">customer name</Col>
<Col xs="6">
<Input
required
maxLength={"20"}
type={"text"}
placeholder={"customer name&#
浏览 8提问于2019-10-21得票数 0
回答已采纳
我有一个使用bootstrap 4和Reactstrap的React web应用程序。我想在工具栏中有几个复选框，但是除了"on“之外，我不知道如何从onChange事件中获得任何东西。 下面是我的代码，每次我单击复选框时，它都会继续在控制台上写上"on“。该复选框不会打开和关闭。 <li className="show-sessions">
<FormGroup check>
<Label check>
<Input
浏览 10提问于2020-10-09得票数 0
在我的应用程序中，我使用react-select组件来选择城市功能。组件呈现土耳其城市。因此，一些城市的名字以土耳其字母"İ-i“开头。每件事都是有效的，问题是，当我输入小写"i“时，我无法得到以"İ”开头的城市名，比如İzmir，İstanbul。
这是我的部件
import Select from 'react-select';
import {
FormGroup,
Input,
Label,
Col,
} from 'reactstrap';
<FormGroup row>
<Col xs=
浏览 0提问于2019-09-01得票数 3
回答已采纳
1回答
我有一个来自reactstrap的<Input/>，它接受日期。我正在使用moment.js来解析我的日期。虽然我希望日期的格式是本地化的。 这是我的代码： <Input
bsSize="lg"
type="date"
name="date"
value={moment(this.state.birthDate).locale('en').format("LLLL")}
onChange={this.handleBirthDateChange}
/> 尽管当我
浏览 34提问于2020-03-30得票数 1
ReactStrap输入验证您好！我正在尝试在我的表单中实现验证。我在我的应用中使用了ReactStrap。但是，验证不适用于有效或无效的输入。下面是我所做的。Valid ={boolean}不会给出错误消息(但不起作用)，而invalid会给出一条错误消息，指出无效需要一个字符串，正如您在下面的错误消息中所看到的那样。 任何帮助都是非常感谢的。 <FormText>Valid PPSN: 7 digits followed by a letter</FormText>
<FormFeedback valid={false}>
浏览 12提问于2020-06-17得票数 0
回答已采纳
1回答
我正试着在我的网站上添加一个日历，以便进行预约，显然，我需要从今天到未来。我如何使用Reactstrap组件做到这一点？在文档上找不到。 导入日历： import { Input } from "reactstrap";
<Input
type="time"
className="form-control"
id="time-start-input"
value={startTime}
onChange={(e) => {
setT
浏览 17提问于2021-01-22得票数 1
回答已采纳
我开始使用react-hook-form来验证我的输入，但是require规则总是被触发，即使我在输入字段中键入/输入一些东西。
import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";
const setErrorStyle = (name) => {
return {
borde
浏览 19提问于2021-06-03得票数 0
回答已采纳
2回答
我有两个组件Select和Input，它们来自reactstrap库。从下拉列表中选择一个项，并给出输入，单击add按钮将数据发送到表中，但添加后的前一个输入保留在字段中。一旦单击按钮，如何将字段重置回位置保持器？select组件看起来像
<Select
name="Item"
closeMenuOnSelect={true}
components={animatedComponents}
placeholder="Select Item"
浏览 8提问于2020-09-03得票数 1
回答已采纳
我正在尝试使用react钩子形式进行用户输入来上传文件。
import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import {
Col,
Row,
Form,
FormGroup,
InputGroup,
Input,
Container,
Button
} from "reactstrap";
export default function App() {
const onSubmit = (data)
浏览 6提问于2021-12-08得票数 1
回答已采纳
1回答
我试图在表格单元格中更改DateTimePicker组件中文本的颜色。
import DateTimePicker from 'react-datetime-picker';
<td>
<DateTimePicker onChange={onChange} value={value} textColor="white"/>
</td>
我得到以下输出。
还有其他方法来改变文本的颜色吗？这张桌子的主题也是暗的。
import React from "react";
import 'bo
浏览 4提问于2022-08-20得票数 0
回答已采纳
1回答
在react-select中，我遇到了映射项目数组以填充下拉列表的问题。我让它在reactstrap中工作，但不知道如何转换它。
下面是reactstrap的工作版本：
<ButtonDropdown isOpen={this.state.metricCategoryDropdownOpen} size="xs" color="secondary" toggle={this.metricCategoryToggle}>
<Dr
浏览 0提问于2018-03-24得票数 0
我是新来的。我想问一个最基本的问题，因为我在Google上找不到相关的文档或答案。以下是典型的react代码的前3行：
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
}
第二行导入的引导组件与react中的Componen
浏览 4提问于2021-04-13得票数 0
回答已采纳
2回答
我有InputField组件，它接受各种道具，如类型、占位符、值等，我正在尝试使用InputField组件创建一个表单。我可以很容易地传递道具从表单，但我不能保存输入值到我的状态。这是我的密码。
InputField.js
import React, { useState } from "react";
const InputField = ({ value, label, placeholder, type, onChange }) => {
const handleChange = (e) => {
const { value } = e.ta
浏览 3提问于2020-12-22得票数 7
回答已采纳
我们使用Dojo1.9.3，并且我们有自定义的小部件，它本质上是一个包装器，可以包含任何其他Dojo小部件以及任何Struts2 JSP组件。
我们目前在使用这些组件时遇到了一个问题，即输入到子组件的两端的尾随空格在发送到服务器时会被保留。这会导致错误，用户可能认为该值是有效的，但实际上不是。
我们目前使用以下代码来处理onchange事件(为简洁起见，一些代码已被删除)。
var containedWidgetId = this.containedWidgetId;
var containedWidget = registry.byId(this.containedWidgetId);
if
浏览 0提问于2017-03-20得票数 0
我在将来自外部css模块的自定义css应用于Reactstrap的输入时遇到问题。所以我有以下代码：
<Input
className={'border-0 p-0'}
style={{
width: '150px',
height: '100px',
fontSize: '18px',
overflow: 'hidden',
浏览 0提问于2021-02-09得票数 0
2回答
有限制的字符输入
、、、、
我正在尝试使用reactjs语义ui创建仅限于4个字符的输入，我已经尝试了很多方法，但似乎都不起作用。
<Input fluid
value={this.state.code}
type="text"
minlength="4" maxlength="8" size="10"
placeholder={t('Code')}
onChange={this.onCodeChange.bind(this)}
error={this.state.formErrorsKeys.code}
/&g
浏览 0提问于2019-01-28得票数 1
我需要在我的Elm项目中的输入元素中添加一个onchange事件处理程序，但是它似乎是不可用的。例如，如果我想添加和onclick事件处理程序，可以使用以下代码：
input [ onClick { desc = "ClickFunction", info = model.name } ] []
但是，当我尝试对onchange执行以下操作时，它就不起作用了：
input [ onChange { desc = "ChangeFunction", info = model.name } ] []
这是我得到的错误消息：
NAMING ERROR - I
浏览 6提问于2022-06-23得票数 1
1回答
使用React 16，尝试创建一个子组件(一个简单的组件)，并且由于某种原因，内部html不会呈现，但是组件标记在使用dev工具进行视图时会呈现。
我的组件代码类似于：
import React, { Component } from "react";
import {Container, Jumbotron, Button, Col, Row } from 'reactstrap';
import './jumbo.css';
import './index.css';
class custHero extends
浏览 0提问于2018-03-08得票数 2
回答已采纳
如果我使用的是const currentUserId = props.id，那么错误将是props.match是未定义的，而变量"userId“在尝试控制台日志时甚至是未定义的。
然后，我使用props.match.params.id --代码甚至不能被读取，它只是空白
我也试图修改代码，变成，const，currentUserId =currentUserId，但是什么也不起作用
我的代码：
import React, {useContext, useState, useEffect} from 'react';
import { GlobalCon
浏览 4提问于2022-07-12得票数 0
回答已采纳
1回答
我在Reactstrap中有一个<select>对象，它是通过Reactstrap的<Input>组件创建的。我想以编程的方式取消在其中选择一个选定的对象，所以当我想要清除状态时，我使用state来控制<select>的值，并将状态设置为'' (一个空字符串)。但是，这样做的效果是设置要选择的select对象中的第一项，而不是取消选择它。
import React, { useState } from 'react';
import "./styles.css";
import {Input, Button}
浏览 3提问于2020-08-20得票数 1
回答已采纳
我正在尝试使用react从表单中获取数据。但是，在获取输入字段的值时，我将面临错误Cannot read property 'firstname' of null。以下是我的注册和钩子文件。registration.js
import React from 'react';
import {
Container, Col, Form,
FormGroup, Label, Input,
Button,
} from 'reactstrap';
import useRegistrationForm from './ho
浏览 3提问于2020-08-25得票数 0
我正在尝试用react中的酶和jest做一些测试，当我打开一个模式时，事情运行得很好，例如，模式中的输入域不在那里，当我试图使用 expect(wrapper.find("input")).toHaveLength(0); 并且在我使用以下命令打开模式后确实存在 const edit = wrapper.find("Button.update-button");
edit.simulate("click");
expect(wrapper.find("input")).toHaveLength(2); 所有这些都能正常工作(包括
浏览 6提问于2019-09-25得票数 0
回答已采纳
我需要添加到包含react组件的文件中。下面是我如何使用一个文件(onChange和onSubmit函数)做到这一点：
const onChangeFile = e => {
setFileData(e.target.files[0]);
};
const onSubmit = e => {
e.preventDefault();
const newItem = new FormData();
newItem.append('item', fileData);
const { description } = offe
浏览 1提问于2020-07-12得票数 1
5回答
我刚开始使用React和JSON，需要一些帮助。有一个textarea字段，用户在其中输入一些数据。如何将输入的文本作为数组按行读取到请求的JSON变量？如能提供任何协助，将不胜感激。
我想要的结果是
{ id: 3, name: 'Monika', birthDay: '1999/01/01', countryDTO: 'USA', films: [ 'Leon:The Professional',
浏览 8提问于2020-02-06得票数 2
回答已采纳
1回答
当我在Nav.Link (Reactstrap)中使用时，Reactstrap不起作用。它进入/register路径，但内容不显示
<Nav.Link className="active"><Link to="/register" className="btn btn-dark btn-lg">Register</Link></Nav.Link>
路径：
<Router>
<Switch>
<Route path="/register" re
浏览 2提问于2021-07-24得票数 0
回答已采纳
我正在使用reactStrap，如何更改模式对话框的宽度，我正在尝试将其设置为100%宽度
我尝试使用modal-content-custom
<Modal isOpen={true} toggle={this.toggle} dialogClassName="modal-content-custom">
使用内联样式
<Modal isOpen={true} toggle={this.toggle} dialogClassName={{maxWidth:'100%'}}>
使用自定义类
.modal-content-custom {
浏览 0提问于2018-03-13得票数 1
一个lambda函数的部署需要指定一个阶段(例如beta)。因此，如果您的主机是123.us-west-1.amazon.aws，那么您在api网关上部署的API将是123.us-west-1.amazon.aws/beta。
如何将转至123.us-west-1.amazon.aws/的呼叫重新路由至123.us-west-1.amazon.aws/beta？
我尝试设置S3存储桶以重定向到不同的主机，但不起作用。在S3中设置KeyPrefixEquals也不需要。
浏览 13提问于2017-02-18得票数 0
回答已采纳
当我从列表中编辑一个名称时，我一直遇到CRUD应用程序的问题，它会引发一个错误"TypeError:无法读取未定义的属性(读取' name ')“。
它似乎起源于我输入字段中的"value={selectedUser.name}“，但是当我删除它时，应用程序会编译，但我根本不能更改该字段--输入时什么都不会发生。任何帮助都是非常感谢的！
import React, { useState, useContext, useEffect } from 'react'
import { GlobalContext } from '../conte
浏览 9提问于2022-05-20得票数 1
回答已采纳
我用'create react- app‘创建了一个react应用。
我现在正在尝试从Reactstrap添加一个导航栏。我从Reactstrap复制粘贴(我将其作为一个react组件添加)
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
浏览 0提问于2019-02-05得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
