在我的react项目中，我有一个要求，我必须连续检查条件并在条件变为真时立即调用函数。
条件如下：
var El = document.activeElement;
if(document.getElementById('myInputField').getattribute('aria-invalid') === 'true'
&& !(document.getElementById('myInputField') === El) {
// function call
}
这在ReactJs中如何实现？
我也可以使用jquery / javascript。
其他详细信息：
我正在使用外部项目中的输入字段。输入字段检查提供的输入并更改其自己的aria-invalid属性。
如果用户使用无效的输入提交表单，我想检查aria-invalid是否为真，并且焦点不在输入字段上。
以下示例显示了正确和不正确的方式来操作DOM（在React的上下文中）：
// -> Imports
import React,{ useEffect,useState } from "react";
// -> Element Ids
const subHeading = "sub-heading";
// -> DOM Manipulator
// -> Don't do this,opt for conditional style instead
// -> Check h1 element for example
function sideEffect() {
document.getElementById(subHeading).style.color = "red";
}
// -> Time Constant
const fiveSeconds = 5000;
export default function App() {
// -> State
const [readCond,writeCond] = useState(false);
// -> Side Effects
// -> Change readCond to true after five second pause
useEffect(() => {
setTimeout(() => writeCond(true),fiveSeconds);
},[]);
// -> Trigger DOM manipulation when readCond is true
useEffect(() => {
if (readCond) sideEffect();
},[readCond]);
return (
<div>
<h1 style={{ color: readCond ? "red" : "black" }}>React Way - Good</h1>
<h2 id={subHeading}>DOM Way - Bad</h2>
</div>
);
}