onchange 相关问题

有关带有 typescript 和 tailwind 的 next.js 应用程序中单选组中默认检查输入的错误

使用 next.js，我构建了一个网页，该网页接受用户的输入（用户从 3 个菜单中进行选择），然后显示包含所请求信息的 Chartjs 条形图。所有 3 个菜单都有默认值

Javascript“onChange”不会在元素值更改时触发

我的大概 HTML： 自动化状态 我的大概 HTML： <td style="width: 25%"> <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span> </label> <select name="dropdown_status" style="display: none;"> <option value=""></option> <option value="1"> Option 1</option> <option value="2"> Option 2</option> <option value="3"> Option 3</option> <option value="4"> Option 4</option> </select> <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;"> <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> <span>Option 1</span> </a> </div> </td> 我的JavaScript： $(document).ready(function() { startProgram(); }); function startProgram() { let automationStatusElement = document.getElementsByName("dropdown_status")[0].nextSibling.children[0].children[0]; automationStatusElement.addEventListener('change', function() { console.log("dropdown_status changed"); }); } 当我更改下拉选项时 - 它会更改 <span>Option 1</span> 文本，但我无法触发事件 console.log("dropdown_status changed");。 我验证了 automationStatusElement 变量具有正确的元素。它只是检测不到变化。 我在这里缺少什么帮助吗？谢谢 您可能想做这样的事情； const drop = document.querySelector("[name=dropdown_status]"); drop.addEventListener("change", (e) => { const selectedOption = e.target[e.target.options.selectedIndex].text; const span = document.querySelector("a > span"); span.textContent = selectedOption; }) <td style="width: 25%"> <label class="io-label" for="custom_automation_status">Automation Status <span class="form-required">*</span> </label> <select name="dropdown_status"> <option value=""></option> <option value="1"> Option 1</option> <option value="2"> Option 2</option> <option value="3"> Option 3</option> <option value="4"> Option 4</option> </select> <div id="dropdown_status23_chzn" class="chzn-container" style="width: 100%;"> <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> <span>Option 1</span> </a> </div> </td>

当等效的 DOM 事件侦听器触发更改事件时，什么可能会导致更改事件不以角度触发？

我有一个角度应用程序，其组件具有文件输入，如下所示： 该组件在 mu 之间共享...

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 数组，如何...