onchange 相关问题

Blazor 应用程序 (net8) 中选择控件的 Onchange 事件未触发

我是 blazor 的新手，正在编写 blazor Web 应用程序。我想在用户在选择控件中进行选择后运行一些逻辑。我尝试过 onchange 和 onselect 事件。

React Checkbox 未发送 onChange

TLDR：使用defaultChecked而不是checked，工作jsbin。 尝试设置一个简单的复选框，在选中时会划掉其标签文本。由于某种原因，handleChange 没有得到满足...

在 Xcode 15 中使用领域列表进行不区分大小写的搜索

我正在开发一个用于存储著名引文的数据库应用程序，我希望用户能够搜索和领域数据库。搜索功能有效，但区分大小写。我已经尝试过样品...

在 <input> 字段中转换的文本不会触发其 onChange

代码在这里： 从“反应”导入反应； 导入“./style.css”； 从 'react' 导入 {useRef, useState, useEffect}; 从 'wanakana' 导入 * 作为 wanakana； 导出默认函数App(...

JavaScript onchange 函数更新数据数组和输入值？

我正在创建一个可编辑表格，用于为名为 7 Wonders 的棋盘游戏评分。在我正在创建的应用程序中，我有一个： DataByPlayer.js：玩家 1-7 的对象数组。每个物体都会容纳...

Swift 编译器警告转换 @MainActor 类型的函数值会丢失全局 actor MainActor

我正在使用 Swift UI。我创建了简单的搜索功能来过滤数据。 OnChnage 函数我正在使用视图模型搜索功能调用 State 属性包装器。我做了一些研究，...

使用 React 更改输入并反映其他几个输入的更改

我有 19 个输入，当其中一个输入发生变化时，所有其他输入都会通过计算反映变化。 cmmph(e.target.value, setKph, setMps)} 我有 19 个输入，当其中一个输入发生变化时，所有其他输入都会通过计算反映变化。 <input value={mph} onChange={(e) => cmph(e.target.value, setKph, setMps)} <input value={kph} onChange={(e) => ckph(e.target.value, setMph, setMps)} <input value={mps} onChange={(e) => cmps(e.target.value, setKph, setMph)} 对于每个输入，我都有一个状态。所以我使用了 19 个useState变量。所有输入都有一个 onChange。 const [mph, setMph] = useState() // miles per hour const [kph, setKph] = useState() // kiliometers per hour const [mps, setMps] = useState() // miles per seconds 因此，当任何输入发生更改时，onChange调用其独特的函数进行计算并设置状态 18 次（对于每个其他输入）。 每个输入都调用自己的函数来计算其他输入的值。这是简单的数学。没有数据库或端点调用。 function cmph(mph, setKph, setMps) { const kph = mph * 1.60934 setKph(Math.round((kph + Number.EPSILON) * 100) / 100) const mps = mph / 2.237 setMps(Math.round((mph + Number.EPSILON) * 100) / 100) } function ckph(kph, setMph, setMps) { const mph = kph / 1.60934 setMph(Math.round((mph + Number.EPSILON) * 100) / 100) const mps = mph / 2.237 setMps(Math.round((mps + Number.EPSILON) * 100) / 100) } function cmps(mps, setKph, setMph) { const mph = mps * 2.237 setMph(mph) const kph = mph * 1.60934 setKph(kph) } 我想要的只是更改任何输入，所有其他输入都会自动反映新值。 PS：我减少了三个输入，因此示例会更小。但我有 19 个。 我该如何解决这个问题？ 堆栈片段： const { useState } = React; const Example = () => { const [mph, setMph] = useState(); // miles per hour const [kph, setKph] = useState(); // kiliometers per hour const [mps, setMps] = useState(); // miles per seconds function cmph(mph, setKph, setMps) { const kph = mph * 1.60934; setKph(Math.round((kph + Number.EPSILON) * 100) / 100); const mps = mph / 2.237; setMps(Math.round((mph + Number.EPSILON) * 100) / 100); } function ckph(kph, setMph, setMps) { const mph = kph / 1.60934; setMph(Math.round((mph + Number.EPSILON) * 100) / 100); const mps = mph / 2.237; setMps(Math.round((mps + Number.EPSILON) * 100) / 100); } function cmps(mps, setKph, setMph) { const mph = mps * 2.237; setMph(mph); const kph = mph * 1.60934; setKph(kph); } return ( <div> <input value={mph} size="5" onChange={(e) => cmph(e.target.value, setKph, setMps)} /> <input value={kph} size="5" onChange={(e) => ckph(e.target.value, setMph, setMps)} /> <input value={mps} size="5" onChange={(e) => cmps(e.target.value, setKph, setMph)} /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script> 有大量的 React-Way 可以解决您的问题。 其中之一是使用带有每个输入/数据类型的键的对象。 然后 onChange 在输入中，使用 data-speed 属性查看哪个值发生了变化，将 1:1 设置为新状态。对于状态对象中的每个其他键，找到正确的 convertFunction 并应用它。 我用一个简单的 cmps 替换了所有 ckph / convertFunction 函数，以保持演示干净。 const { useState } = React; const Example = () => { const [data, setData] = useState({ mph: 0, kph: 0, mps: 0 }); const convertFunction = (n) => Math.round(n * Math.random() * 16); const onInput = (e) => { const changedInputValue = +e.target.value; const changedInputType = e.target.getAttribute('speed'); setData(p => { const newData = { ...data }; for (var speed in p) { if (speed === changedInputType) { newData[speed] = changedInputValue; } else { // Choose correct convert function newData[speed] = convertFunction(changedInputValue) } } return newData; }); } return ( <div> <input value={data.mph} size="5" speed='mph' onChange={onInput} /> <input value={data.kph} size="5" speed='kph' onChange={onInput} /> <input value={data.mps} size="5" speed='mps' onChange={onInput} /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script> 问题在于您的输入是受控，这意味着它们的值不会自动更新，除非您设置用于设置其value的状态成员。它最初起作用的原因是，如果不给 useState 赋予初始值，则默认为 undefined，并且 value={undefined} 使 React 认为输入是 不受控制。一旦更改值，输入就会从不受控变为受控，并且它会停止工作。 （如果您在开发过程中使用 React 库的开发版本，您会收到一个很大的警告。）有关受控输入与不受控输入的更多信息在文档中。 相反： 将初始值与 useState 一起使用，这样它们就不会默认为 undefined 处理每个输入的change事件时，更新控制它的状态成员 例如，对于mph： const mphOnChange = ({ currentTarget: { value } }) => { setMph(value); // <======================= This is what was missing cmph(value, setKph, setMps); }; 工作示例（这些默认值可能需要调整）： const { useState } = React; function cmph(mph, setKph, setMps) { const kph = mph * 1.60934; setKph(Math.round((kph + Number.EPSILON) * 100) / 100); const mps = mph / 2.237; setMps(Math.round((mph + Number.EPSILON) * 100) / 100); } function ckph(kph, setMph, setMps) { const mph = kph / 1.60934; setMph(Math.round((mph + Number.EPSILON) * 100) / 100); const mps = mph / 2.237; setMps(Math.round((mps + Number.EPSILON) * 100) / 100); } function cmps(mps, setKph, setMph) { const mph = mps * 2.237; setMph(mph); const kph = mph * 1.60934; setKph(kph); } const Example = () => { const [mph, setMph] = useState(0); // miles per hour const [kph, setKph] = useState(0); // kiliometers per hour const [mps, setMps] = useState(0); // miles per seconds const mphOnChange = ({ currentTarget: { value } }) => { setMph(value); // Recommend explicit conversion to number here cmph(value, setKph, setMps); }; const kphOnChange = ({ currentTarget: { value } }) => { setKph(value); // Recommend explicit conversion to number here ckph(value, setMph, setMps); }; const mpsOnChange = ({ currentTarget: { value } }) => { setMps(value); // Recommend explicit conversion to number here cmps(value, setKph, setMph); }; return ( <div> <input value={mph} size="5" onChange={mphOnChange} /> <input value={kph} size="5" onChange={kphOnChange} /> <input value={mps} size="5" onChange={mpsOnChange} /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

如何在 Blazor Serv 中执行与 razor 页面输入字段的 onchange 事件相关的功能。应用程序？ （我必须使用函数中的输入值）

您好，我的 Blazor razor 页面中有一个文本输入字段，用户必须在其中提供输入字符串。我必须在用户键入值期间评估此输入字符串。我定义了一个函数...

输入数字后，使用javascript格式化3个零

我了解如何使用 toFixed(3)。我不确定的是不要将其发送给函数。我以前使用过 onkeyup 或 onchange 但没有传递参数。我需要知道哪个文本框...

每当我在 PHP 中更改用户时，我想更改电话号码

当我选择选择时，它会给我“用户”表中的ID。我希望当我更改用户选择中的选择时，下面的值也会更改。这是我的代码： 当我选择选择时，它会从“用户”表中给我 ID。我希望当我更改用户选择中的选择时，下面的值也会更改。这是我的代码： <select name="User" class="selectinput" onchange="updatePhone()"> <option value selected>User</option> <?php $usersql = "SELECT id, name, phone FROM user"; $userresult = mysqli_query($conn, $usersql); if (mysqli_num_rows($userresult) > 0) { while ($row = mysqli_fetch_assoc($userresult)) { echo "<option value='" . $row["id"] . "' data-phone='" . $row["phone"] . "'>" . $row["name"] . "</option>"; } } ?> </select> <div class="w-100 d-flex"> <div class="d-flex"> <div class="align-self-center"> Phone number: </div> </div> <input style="width:80%" type="text" name="Phone" id="phone-input"> </div> 这是我的脚本： function updatePhone() { var phone = $('select[name="User"]').data('phone'); $('#phone-input').value(phone); } //To archive that u can modify the function as follows function update_Phone() { let select_element = document.querySelector(".selectinput"); // getting select element let phone_input = document.getElementById("phone-input"); // get the input to to which you will assing new value let selected_option = select_element.options[select_element.selectedIndex]; // get the selected option let phone = selected_option.getAttribute("data-phone"); // get the value assing to the attributes of the selected option`enter code here` phone_input.value = phone; // assing value to the input on select }

javascript 文件输入 onchange 不起作用 [仅限 ios safari]

下面的代码适用于除 Safari 移动设备之外的任何地方。 显然 onchange 永远不会被触发。 // 创建隐藏文件输入元素 var input = document.createElement("input"); ...

Html checkBox onchange 不起作用

第一次选中或取消选中后，什么也没有发生。第二次之后...

更改整个表格

如何对所有表单元素使用更改或类似事件？我不想分别对每个字段使用更改。

如何避免切换视图递归onChange调用SwiftUI

HStack{ ForEach($rs.newsCategoryCollection){ $类别中 切换（category.id，isOn：$category.isSelected） .toggleStyle(.button) .onChange(of:category.isSelected) {值在 ...

如何避免递归 onChange 调用 SwiftUI

HStack{ ForEach($rs.newsCategoryCollection){ $类别中 切换（category.id，isOn：$category.isSelected） .toggleStyle(.button) .onChange(of:category.isSelected) {值在 ...

Kendo grid 如何捕获单元格更改事件

如果我更改预定义单元格中的文本，我需要触发更改事件。 我需要这样的东西： { 字段：“用户名”， 标题：$translate.instant('USER_NAME'), onchange:函数(值...

react，更新 useState 数组仅在第二次提交后才起作用

我在react中编写了一个函数，它应该读取一个字符串 从字符串中剪切出地址并将数据返回给后端。 我已经可以用“leads”填充一个空的 useState 数组，如何...

NextUI 选择组件 onChange 选项

} > {citiesArray.map ((城市) => ( < <Select label="Starting City" className='max-w-xs mx-auto shadow-lg' startContent={<LocationCityIcon/>} > {citiesArray.map ((city) => ( <SelectItem key={city} value={city} onChange={() => handleStartingCityChange(city)}>{city}</SelectItem> ))} </Select> 我正在使用 NextUI 的 Select 和 SelectItem 组件。我只是尝试根据从数组中选择的字符串来更改变量。每当我更改 SelectItem 的值时，我就会调用一个 handleStartingCityChange 函数。目前，我只是在控制台上记录此函数的内容，但没有出现任何内容。我真的很想得到一些帮助。谢谢 根据文档 事件 onChange 将应用于 主要组件 Select，而不是 SelectItem。 在上面的链接中提到的受控示例下方提供了一个 onChange 示例 请尝试以下代码： import React, { useEffect, useMemo, useState } from 'react' import { Select, SelectItem } from "@nextui-org/react"; const CitySelect = () => { let options = [ { label: "City 1", value: "city1" }, { label: "City 2", value: "city2" }, { label: "City 3", value: "city3" }, ] const [SelectedCity, SetSelectedCity] = React.useState(new Set([options[0]['value']])); // SETTING DEFAULT CITY AS 1ST CITY const [Variable, SetVariable] = useState("-") // A Variable THAT WILL CHANGE according to the SelectedCity const handleSelectionChange = (e) => { SetSelectedCity(new Set([e.target.value])); console.log("Selected City", Array.from(SelectedCity)); // YOU MAY NOTICE THAT SELECTION IS OLD, LAGGING BEHIND LATEST STATE // TO FIX THAT USE, useMemo // Using Array.from() to make a array out of Set Data type }; // WHENEVER SelectedCity CHANGES useMemo will be fired useMemo(() => { console.log("City Selection Changed : ", Array.from(SelectedCity)); // Using Array.from() to make a array out of Set Data type console.log("Changing the variable :", Array.from(SelectedCity)[0].toUpperCase()); SetVariable(Array.from(SelectedCity)[0].toUpperCase()) }, [SelectedCity]) return ( <div> <h3>This Variable changes according to SelectedCity : {Variable}</h3> <Select items={options} selectedKeys={SelectedCity} // onSelectionChange={SetSelectedCity} // DIRECTLY CHANGES SELECTED VALUE onChange={handleSelectionChange} /* when you use onSelectionChange dont use onChange & vice-a-versa, JUST ONE of them */ defaultSelectedKeys={SelectedCity} // SETTING DEFAULT SELECTED KEY AS 1ST CITY label="Favorite City" placeholder="Select an City" > { (options) => <SelectItem key={options.value} value={options.value}> {/* LOOK HERE CLOSELY NO EVENTS APPLIED HERE*/} {options.label} </SelectItem> } </Select> </div> ) } export default CitySelect

仅当 Promise 在 onChange 事件中解析时才触发 onChange 事件

常量验证（id）{ 重新调整新的 Promise((resolve,reject)=>{ 轴调用（） .then((res)=> 解析(res)) .catch((err)=>拒绝(err)) }} 我有以上承诺。我正在尝试调用 onChange ...

反应输入 OnChange 字段

我正在开发一个 React 应用程序。 我已经实现了一个输入字段，用户可以在其中输入值。但是，我遇到了此输入字段的问题。当用户输入时，它会显示中间值，