如何重置选择字段onChange
重置选择字段onChange是指在前端开发中，当用户选择了一个选项后，如何重置选择字段的值。通常情况下，可以通过以下步骤来实现：
- 监听选择字段的onChange事件：在HTML中，可以使用
<select>元素来创建选择字段，并为其添加一个onChange事件监听器。例如：
<select onChange="resetSelectField(this)">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>- 编写JavaScript函数来重置选择字段的值：在JavaScript中，可以编写一个函数来重置选择字段的值。该函数可以通过将选择字段的值设置为默认值或空值来实现重置。例如：
function resetSelectField(selectField) {
selectField.value = ""; // 设置选择字段的值为空
}- 调用重置函数：当用户选择了一个选项时，onChange事件将触发重置函数，从而重置选择字段的值。
这样，当用户选择了一个选项后，选择字段的值将被重置为空，以便用户可以重新进行选择。
对于这个问题，腾讯云提供了一系列与前端开发相关的产品和服务，例如：
- 腾讯云云开发：提供全托管的云端开发平台，可用于快速构建前后端分离的应用程序。
- 腾讯云CDN：提供全球加速服务，可加速静态资源的传输，提升前端页面加载速度。
- 腾讯云API网关：提供API管理和发布服务，可用于构建灵活的前后端交互接口。
通过使用这些腾讯云的产品和服务，开发人员可以更高效地进行前端开发，并实现选择字段的重置功能。
相关·内容
显然，当你重置一个表单时，它不会自动触发字段onChange。
请参阅此示例：
(输入有效的电子邮件地址，然后单击重置，而不是使用键盘退格键清空字段)
<input id="email"
value={values.email}
onChange={customHandleChange} // This is not triggered on reset
/>
有没有办法让resetForm调用所有的字段onChange？
浏览 0提问于2019-06-06得票数 1
2回答
我制作了一个带有多个选项的表单。当您选择一个选项时，它将启用下一个select元素，并使用Ajax和PHP用值更新它。
但是，如果您更改了以前的选项，它只会在更改后重置选择字段，而不是重置更改后的选择字段下的所有选择。
那么，如何清除最后更改的元素下面的所有表单元素呢？
<form action="" method="post">
Year:
<select onchange="updateField(this.value, 'brand', 'Year', 'Marke_vozila&
浏览 5提问于2013-01-27得票数 0
我最近开始使用react-redux架构。我想在成功操作后清理一些字段。我知道如何使用react-redux的方法，但我想知道:使用普通的javascript清理这些字段是不是一种糟糕的做法？我知道这会影响时光机，但我不认为这是一个需要保留的临界状态。
赞成和反对都是受欢迎的，而不仅仅是一个严格的答案。
下面是一个例子：
<input type="text" onChange={this.onChange}/>
我用onChange事件更新了parent的私有字段。我知道我可以将private字段绑定到input的value字段，但是因为唯一需要做的就是清除该字段，
浏览 3提问于2016-07-25得票数 0
回答已采纳
1回答
我的useState：
const [valuesToSearchFor, setValuesToSearchFor] = useState([]);
我有以下带有onChange的搜索输入字段：
onChange={() => {
setValuesToSearchFor(
valuesToSearchFor.includes(value)
? valuesToSearchFor.filter(val => val !== value)
: [...valuesToSearchFor, value]
);
}}
这会改变我页面上的一些数据，如下所示：
浏览 1提问于2022-03-07得票数 0
回答已采纳
1回答
我希望reservation_amount是sale_total的一半，但它必须是一个可编辑的字段，所以我可以随时更改它。我现在的问题是，当我改变字段的值，它重置为一半的sale_total，我认为这是因为计算值。我怎么做才能改变它呢？或者如何设置为reservation_amount的第一个值，即sale_total的一半，这样就可以更改它了？
这是我的实际代码
sale_total = fields.Float(
string="Total Sale", compute='_onchange_calculate_total')
reservation
浏览 1提问于2022-09-27得票数 2
1回答
如何重置特定的输入字段，在本例中为标题输入字段？我知道如何重置所有字段(使用form.resetFields())，但不知道如何在蚂蚁设计中重置特定字段
<Form.Item name='Title' label='Title'>
<Input value={title} onChange={handleChange('title')} />
</Form.Item>
<Form.Item name='Category'
浏览 2提问于2021-01-25得票数 0
我有一个文本字段，我从该字段调用onChange事件上的函数。当该文本字段中的值发生更改时，我将在此处抛出一个确认窗口。如果单击了cancel (在确认窗口中)，则必须在文本字段中重新设置旧值。如果单击“继续”或“确定”，则应保留新值。我已经尝试了很长一段时间，但无法保留旧的价值。
例如:在onchange之前，val in text field = 'first‘；onChange事件，val更改为' second '，确认窗口打开，如果确定选择的文本字段应该是second，如果选择了cancel，则文本字段中应该出现’first‘。
function onChang
浏览 0提问于2013-06-05得票数 5
回答已采纳
在表单重置后，当文本字段被清除时，chrome似乎不会触发更改事件。
代码如下：
<html>
<head>
<script>
function doChange() {
document.getElementById('info').innerHTML = 'Field changed to:[' + event.target.value + ']';
}
</script>
</head>
<body>
<form>
浏览 1提问于2015-03-11得票数 0
这是一个ReactJS问题.
我不能重置表单的多个输入字段。
我的应用程序中有一个表单，它有多个输入字段，我使用onChange函数获取用户输入，然后用setState更新this.state，然后使用spread操作符复制this.state中的所有值，并创建一个新的对象来存储这些复制的值。最后，我将新对象传递到函数中以供进一步使用(不相关)。我的代码问题是，在将对象传递到函数后，无法清空字段。我尝试通过使用this.setState和event.target.reset()清除值来手动重置值，但这两种方法都无法工作。
import React, { Component } from
浏览 3提问于2019-01-07得票数 2
回答已采纳
我想要创建一个select输入，其中的值总是重置为options数组的第一个值。
import Select from 'react-select';
import {useState} from 'react';
function Component(){
const options = [{value: "something", label: "Something"}, ...]
const [inputValue, setInputValue] = useState("");
const [in
浏览 3提问于2022-11-01得票数 1
回答已采纳
1回答
我有一个有三个字段的页面：
SearchSelect (react-select)
Dropdown (react-select)
InputNumber (react-number-format)
我需要清除提交时的所有字段值。
InputNumber被控制，因此当i setState具有初始状态时，输入字段值将被清除。
我不知道如何清除两个选择的值，它们没有被控制，所以如何在提交时清除它们的值？
这三个领域：
<SearchSelect
placeholder="Search fees"
loadOptions={this.loadOption
浏览 0提问于2019-01-31得票数 1
1回答
我有两个字段组件，一个家长和一个孩子。由于“子”依赖于父级，因此每当更新父级时，都要重置“子”。
我试过这个：
<Field name="parent">
{(props) => {
return (
<Parent
onChange={(newValue) => {
props.input.onChange(newValue);
浏览 8提问于2022-04-19得票数 1
回答已采纳
2回答
我有两个组件Select和Input，它们来自reactstrap库。从下拉列表中选择一个项，并给出输入，单击add按钮将数据发送到表中，但添加后的前一个输入保留在字段中。一旦单击按钮，如何将字段重置回位置保持器？select组件看起来像
<Select
name="Item"
closeMenuOnSelect={true}
components={animatedComponents}
placeholder="Select Item"
浏览 8提问于2020-09-03得票数 1
回答已采纳
1回答
我有一个用React和Formik制作的应用程序。我正在尝试添加一个警告，提醒用户在导航离开之前保存更改。从react-router-dom 5开始，我们可以使用Prompt。因此，我的初始代码是： const PromptWhenDirty = () => {
const { dirty, touched } = useFormikContext();
console.log('touched:', touched);
return <Prompt when={dirty} message={'Leave without saving cha
浏览 13提问于2021-05-10得票数 1
回答已采纳
本质上，我有一个react日期选择器，作为redux表单字段合并到我的表单中。我允许用户使用redux-form reset prop清除整个表单。这很奇怪，因为datepicker在我的表单数据中是可以识别的，但是当我试图清除整个页面时，它是唯一没有清除的字段。
this.props.reset this.props.change
我的日期选择器：
const CustomInput = React.forwardRef((props, refs) => {
const inputProps = props.inputProps;
inputProps.input.on
浏览 8提问于2019-10-26得票数 0
我在Chrome (22.0.1229.79版)中遇到了一个bug (从上周开始)，它的一些javascript试图将字段值转换为大写。它似乎与CSS (文本转换:大写)冲突，这使得字段值同时看起来更大写。
当跳出字段时，onChange事件处理程序将尝试将字段值更改为大写，但结果是字段变为空。但是，如果您再次尝试在字段中键入，您的前一个文本将重新出现。
还有其他人看到过同样的东西吗？我认为这需要向谷歌报告。
这里有一个测试用例..。
<script>
function upperKey(obj)
{
var val = obj.value;
if(val !=
浏览 5提问于2012-10-01得票数 8
回答已采纳
reset表单即使在向服务器提交数据之后也不会重置文本字段。我打过电话给setRegister({...initialState});，但它不关心和不重置字段，有人能告诉我原因是什么吗？
const [formRegister, setRegister] = useState({ _id: "", nomineename: "", email: "", description: "", nominatedby: ""});
const onChange = (e) => {
e.persist();
浏览 1提问于2021-05-23得票数 0
回答已采纳
设MyFunction()是一些JavaScript函数。是否有可能将'onblur‘和'onchange’HTML事件组合起来(最好使用香草Javascript)，以便在触发这两个事件(一个接一个)时准确地调用MyFunction()？例如，如果我有一个HTML5日期字段，我希望在
日期字段已被更改，而日期字段在更改后失去焦点。
我的非工作代码部分想要这样：
<input type="date" 'onchange onblur'="MyFunction()">
浏览 3提问于2020-02-06得票数 1
回答已采纳
我在一个小的the项目中创建了下面的钩子。从“react”导入{ useState }；
export default initialValue => {
const [name, setValue] = useState(initialValue);
const handleChange = e => {
setValue(e.target.value);
};
const reset = () => {
setValue("");
};
return [name, reset, handleChange];
};
浏览 0提问于2020-01-18得票数 0
回答已采纳
2回答
我正在尝试创建一行，如下所示：
下面是“Row”的反应性组件代码：
/*
* The render method of this component
*/
render() {
return (
<form className="form-inline">
<FormGroup>
<InputGroup>
<InputGroup.Addon>
<inpu
浏览 4提问于2017-09-28得票数 10
回答已采纳
3回答
这就产生了一个错误，并破坏了函数。
该错误表示“无法读取未定义的属性' onchange‘”，即使我试图测试onchange以防止错误。
这是我的功能：
function ClearAndRun(element) {
$el = $("select, input");
$next = $el.eq($el.index(element) + 1);
for(i=$el.index($next);i<$el.length;i++) {
if($next.get(0).onchange != null) {
$next
浏览 4提问于2016-06-17得票数 0
回答已采纳
如何设置MUI DatePicker的占位符文本。删除输入字段中的文本时显示的文本。我希望将文本设置为"tt.mm.jjjj"，并始终显示以下错误消息： Format string contains an unescaped latin alphabet character `j` Sandbox <DatePicker
inputFormat="tt.mm.jjjj"
label="Basic example"
value={value}
onChange={(newValue) => {
浏览 45提问于2021-10-11得票数 3
回答已采纳
我正在使用react-select下拉菜单我的任务是什么我需要清除重置按钮的onClick中的选定字段意思是说，如果我在下拉列表中选择名称，它将在我选择的内容中可见，因此我需要清除选定字段，或者在清除占位符文件将可见之后，我是否可以再次选择字段
const [data, setData] = React.useState([]);
const [value, setValue]= React.useState('')
const handleSelectChange = (object, action) => {
let name = action.name;
浏览 6提问于2021-07-19得票数 0
我在“精选”中绘制了国家地图。当我重置select时，占位符仍然是国家名称，但值被重置为未定义。
const countries = [
{ label: 'France', value: 'FR' },
{ label: 'Germany', value: 'DE' },
];
const defaultValues = {
country: undefined,
};
const Select: FC<Props> = ({
options,
onSelect,
placeholder =
浏览 15提问于2022-12-03得票数 1
我正在创建一个React.js PWA。
我有一个输入字段，其中包含一个onChange属性。
<input onChange={(e) => handleInput(e)} />
在我的桌面浏览器中，这非常好，但是在我的移动浏览器中，onChange处理程序似乎不会被触发。
我还试图直接alert() onChange。
<input onChange={() => alert()} />
同样，在桌面浏览器中，它工作得非常好，但在我的移动浏览器中却并非如此。
附加信息：
我使用样式组件来创建我的输入元素。
我使用更新状态值。
电话: iPh
浏览 0提问于2019-07-17得票数 2
回答已采纳
我有以下表格，
import { useState } from 'react';
import Head from 'next/head';
import { FormProvider, useForm } from 'react-hook-form';
import { useSession } from 'next-auth/client';
// components
import ErrorsPopup from '@/components/ErrorsPopup';
import FormField
浏览 13提问于2021-12-30得票数 0
我试过使用“重置”函数表单react-hook-form，但提交后输入字段不为空。我不知道为什么，我确定我错过了什么，但找不到什么。 下面是我的代码： const Form = () => {
const [values, setValues] = useState({
email: "",
name: "",
subject: "",
description: "",
});
const { register, handleSubmit, reset, errors } =
浏览 117提问于2020-07-23得票数 6
回答已采纳
因此，我有一个父类，在那里我按下按钮，然后调用TagSelector的'clearValue‘方法，在这里我需要清除AsyncCreatableSelect输入。
TagSelector类：
export default class TagSelector extends Component {
constructor(props) {
super(props);
this.state = {
tagDownloaded: []
};
clearValue = () => {
浏览 22提问于2019-07-12得票数 0
回答已采纳
更新数据模板的标准值并保存更改时，在清除缓存之前，更新的值不会反映在数据模板的实例中。
这发生在所有数据模板中，而不是由于在实例中被覆盖的标准值。
例如，在由内容页模板继承的基页模板中，有一个字段包含电子邮件地址。
在内容树中创建新的内容页实例之后，电子邮件字段将正确地设置为标准值(并且在字段名标签旁边有标准值)。
返回到基页模板、更新电子邮件地址和保存项后，内容页实例中的值不会更新，但是它的字段旁边仍然有标准值标签。
在清除缓存(目前正在使用)页面并使用“清除所有”按钮之前，不会更新字段的值以反映基本模板。
为什么标准值被缓存在内容编辑器中，我们如何防止这种情况发生？
更新
尝试将内容项的字
浏览 3提问于2016-03-09得票数 4
当将状态设置为带有两个字段的表单中的状态时，我对jsx做出了一些反应，并且遇到了一些问题，这些字段执行ajax调用，将json对象(响应数据)放入状态的field3中。我有以下几点：
export interface IMyClassState {
field1: string;
field2: string;
field3: object;
}
export class MyClass extends React.Component<IMyClassProps, IMyClassState> {
state: IMyClassState = {
浏览 0提问于2018-09-07得票数 0
回答已采纳
我有一个输入type=“文件”的材料ui设计。如何验证文件并显示错误消息？
App.js
import React from "react";
import {useForm } from "react-hook-form";
import Button from "@mui/material/Button";
import { MuiFileInput } from "mui-file-input";
export default function App() {
const { register, handleSubm
浏览 16提问于2022-11-13得票数 0
import React, { Component } from "react";
import fire from "../config/fire";
import { Form, Button } from "react-bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"
浏览 10提问于2020-06-30得票数 0
然而，小部件在表单中。
form.reset()
不清除先前选定的CheckedMultiSelect值。
var list = new CheckedMultiSelect({
dropDown: true,
labelText: 'States',
multiple: true,
name: 'state',
onChange: getValues,
required: false
}, "stateSelect");
我已经尝试了下面的代码，但它不工作。
list.reset()
浏览 5提问于2014-05-06得票数 4
回答已采纳
1回答
我使用和redux。
在组件中，我首先必须执行向后端发送请求并在Redux中分配结果的操作。
因此，在组件中，我在开始时没有表单的值。只有当数据在Redux中被分配时。
现在如何用Redux的值填充字段？
export default function Foo() {
const { baz } = useSelector(state => state.bar)
useEffect(() => {
dispatch(fetchBaz())
}
const { handleSubmit, register, errors, reset, watch, se
浏览 1提问于2020-04-09得票数 4
回答已采纳
2回答
输入验证错误消息不会在响应中消失
、、、、
当你想要编辑一个用户的时候，我使用一个反应模式来显示。但是，当我取消Modal并单击它时，两个错误消息仍然在输入字段下面。我怎么解决这个问题？
<Modal isOpen={this.state.editUserModal}
toggle={this.toggleEditUserModal.bind(this)}>
<ModalHeader toggle={this.toggleEditUserModal.bind(this)}>
Edit user
</ModalHeader>
<ModalBod
浏览 1提问于2019-07-12得票数 0
回答已采纳
选择xe:namePicker控件中的OK按钮后，如何建立部分刷新？
我只有for属性，它复制赋值字段中的选定值。
该字段的onchange事件似乎并不总是能够识别值更改。
浏览 3提问于2017-10-10得票数 0
2回答
在这里创建一个简单的联系人表单。我已经为输入字段创建了状态，如下所示
const [fullName, setFullName] = useState('')
const [email, setEmail] = useState('')
const [messages, setMessage] = useState('')
我的handleSubmit函数，用于将数据推送到数据库。
const handleSubmit = (e) => {
e.preventDefault();
db.collection("contact
浏览 1提问于2021-07-06得票数 1
1回答
我想在表单中单击重置按钮时清除所有字段。我如何使用state来完成这项工作？我使用的是材料ui主题。我不想单独设置状态。这有可能吗？ <form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="Name">Name</InputLabel>
<Input id="name" name="name&
浏览 12提问于2019-05-14得票数 1
回答已采纳
1回答
我在DHTMLX Calendar的输入字段中使用onChange时遇到了问题。
我用以下代码初始化代码：
jQuery(document).ready(function($){
var calendar;
calendar = new dhtmlXCalendarObject(["date"]);
calendar.hideTime();
calendar.setDateFormat("%d/%m/%Y");
$('.lightbox
浏览 1提问于2013-04-10得票数 0
1回答
我的状态是这样的：
this.state = {
shoe: {
selectedBrand: "",
selectedEU: "",
selectedUS: "",
selectedUK: "",
selectedFraction: "",
thumbnail: null
}
};
这将绑定到以下几个：
<Select value={this.state.shoe.selectedUK.value}
onChange={this.upd
浏览 1提问于2018-11-19得票数 0
回答已采纳
1回答
我在我的angular项目中使用selectize.js库，并且我试图在提交后重置我的表单。我想要重置所有选择下拉列表，但当我清除选择字段时，所有选项都会被删除。
我的代码：
$('.select-beast').each(function(){
var _thisEl = $(this);
$(this).selectize({
sortField: 'text',
onChange:function(value){
}
});
});
要重置，请执行以下操作：
var selectiz
浏览 0提问于2018-10-30得票数 1
我在为一家网上商店做目录。在我的handleSave函数的末尾，有没有一种方法可以让我调用Admin类状态中的值来为用户重置输入字段？我的最终目标是为用户重置页面上的输入。我不确定我是不是做错了，我正在学习。谢谢!这是我的代码。 class Admin extends Component {
state = {
id: "",
price: 0,
stock: 0,
title: "",
description: "",
image:
浏览 32提问于2021-07-14得票数 2
我使用Grails 代码实现了ajax选择，用户选择一个国家，并且更新城市字段。我使用的是jQuery而不是原型。
选择新国家后，“城市”字段不变，但当用户单击“城市选择”时，只显示新城市，用户可以选择其中之一。
正在更新“城市选择”列表，但当前显示的值不会自动更新。
这是一种观点：
<div data-role="fieldcontain">
<label for="country">Country</label>
<g:select
浏览 6提问于2011-09-12得票数 1
4回答
如何在React JS onClick中重置表单中的值？
class AddFriendForm extends Component {
constructor(props) {
super(props)
this.state = {
firstname: '',
lastname: '',
}
}
render() {
const { addFriend } = this.props
const setFirstName = add => this.setState({ firstname:
浏览 6提问于2017-12-16得票数 4
import React from 'react'
export default class Login extends React.Component {
handleSubmit=(e)=>
{
e.preventDefault();
console.log('you clikked submit')
}
state={
fName:'',
lName:'',
gender:'',
}
这些就是我正在讨论的函数，我使用setState来设置
浏览 0提问于2021-09-24得票数 0
在我的表单中，我有一个折扣字段，该字段接受从总账单(用PHP生成的HTML)中提取的美元金额：
echo "<input id=\"discount\" class=\"text\" type=\"text\" name=\"discount\" onkeypress=\"return currency(this, event)\" onchange=\"currency_format(this)\" onfocus=\"on_focus(this)\" onblur=
浏览 5提问于2011-01-09得票数 1
回答已采纳
在这里的输入框中，我通过useState钩子传递一个初始值。现在假设我在输入字段中键入，并通过单击“更改”按钮重新呈现组件，它仍然显示键入的输入值。但我想在组件重新渲染时获得初始值。如何做到这一点？ import React , { useState, useEffect } from "react";
import "./styles.css";
export default function App({val}) {
const [value, setValue] = useState(val);
const [x, setX] = useState
浏览 27提问于2020-03-22得票数 0
1回答
在过去的几天里，我一直在努力解决一个问题：
我正在为表单字段使用上下文提供程序，无论出于什么原因，当我使用备忘录时，字段总是相互覆盖。
提供商：
export const Context = React.createContext();
function Form_Provider({ values, onChange, children }) {
return (
<Context.Provider value={{ values, onChange }}>
{children}
</Context.Provider>
)
});
浏览 4提问于2020-12-04得票数 0
回答已采纳
我有一个页面，它加载了很多JavaScript文件。在文件中的某个地方，一个onchange处理程序被添加到inputfield A中。
当一个值被添加到输入字段A中时，inputfield B会自动填充另一个值(取决于A的值)。
文件的数量和输入字段的名称('code'，'key')使得很难使用grep来查找onchange的定义位置。
我试过用
DragonflyFirefox Opera Google Chrome Developer Tools
但我似乎找不出如何让他们向我展示，在哪里我可以找到称为的onchange函数。
有人想到办法了吗？
浏览 5提问于2011-05-18得票数 3
回答已采纳
1回答
我有一个redux表单，单击复选框可显示或隐藏表单的一部分。当显示或隐藏表单时，我也想重置字段，但这似乎不起作用。这是复选框字段：
<CheckboxField
key="willUseManuelLetter"
name="willUseManuelLetter"
label={{ id: 'HandlingForm.willUseManuelLetter' }}
onChange={this.onToggle}
readOnly={readOnly}
/>
下面是我根据复选框字段的状态显示或隐藏的字段：
<
浏览 10提问于2018-07-30得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
