如何在线比较 HTML 输入的值

Question

如果 value.= defaultValue，我想要一个具有“突出显示”class 的输入，由于我正在使用的库。 我不能可靠地使用名称或 onChange 事件，（如果需要，我可以做到。但设置起来会很痛苦）：目前它看起来像：

<td><input type="number" className={(this.value !== this.defaultValue ? 'highlight' : '')} defaultValue={1}/></td>

尝试使用“this.value”或“this.defaultValue”时出现错误，因为“this”的上下文指的是页面，而不是元素。 有没有一种在线方式可以获得这个值进行比较？

Answer 1

尽我所能，没有办法做到这一点。 我想出的解决方案是，

<td><input id={table.ID.toString()} type="number" onChange={() => highlightElement(table.ID.toString()} defaultValue={table.defaultValue}/> </td>

并将 highlightElement() 定义为：

function highlightElement(id:string){
     const element = document.getElementById(id);
     element.style.backgroundColor = "#FDFF47";
}

...可能还有一种方法可以将预期的默认值输入为 function 参数并获取输入的当前值，比较两者，如果匹配则不突出显示它，否则应用样式。 但这适合我目前的需要。