REACT -如果一个条件使用正则表达式是有效的布尔标志

Question

如果proof文本中包含有效的URL，我想设置一个布尔标志。我使用Regex (http://或https://或www。是有效的url)

const TabContent = ({ name, typeProof }) => {
const [text, setText] = useState("");
const [proof, setProof] = useState("");
const [inputURL, setInputURL] = useState("");
const [valid, setValid] = useState("false");
const isValidURLRegex =
"([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?";
// http:// or https:// or www. should work
const validateURL = (value) => {
if (!isValidURLRegex.test(value)) {
setValid(false);
} else {
setValid(true);
}
};
function onChange(e) {
setInputURL(e.target.value);
validateURL(e.target.value);
}
return (
<>
<SafeAreaView>
<TextInput
style={{
height: 50,
margin: 12,
borderWidth: 0.5,
padding: 10,
borderRadius: "10px"
}}
placeholder="Enter your proof here:"
multiline={true}
onChangeText={(value) => setProof(value)}
value={proof}
error={inputURL}
onChange={() => setInputURL((error) => !error)} // or  onChange={onChange}
/>
</SafeAreaView>
</>
);
};
export default function Tabs({ data }) {
return (
<TabsComponent forceRenderTabPanel>
...
</TabList>
{data.map(({ name, typeProof }) => (
<TabPanel key={name}>
<TabContent {...{ name, typeProof }} />
</TabPanel>
))}
</TabsComponent>
);
}

我的代码

Answer 1

我建议您使用URL来检查URL是否有效，而不是RegExp解析:

const checkIsValidUrl = (url: string): boolean => {
try {
new URL(url);
return true;
} catch {
return false;
}
};

然后你可以在React组件中使用它:

const isValidUrl = checkIsValidUrl(inputURL);

您也可以记住它，但这是一个过早的优化，不建议这样做。

const isValidUrl = useMemo(() => checkIsValidUrl(inputURL), [inputURL]);

---

如果你想只允许http和https协议，你可以这样更新实用程序:

const checkIsValidUrl = (url: string): boolean => {
try {
const { protocol } = new URL(url);
return protocol === 'https:' || protocol === 'http:';
} catch {
return false;
}
};

---

如果你真的想保持标志的状态，那么你应该使用一个效果:

useEffect(() => {
const isValidUrl = checkIsValidUrl(inputURL);
setValid(isValidUrl);
}, [inputURL]);