子组件强制重估

Question

我有一个使用自定义元素的表单。在input组件中，我管理输入的状态（有效/无效）。在表单中，我要求用户重新输入密码，我希望如果用户输入两个正确的密码，然后修改第一个，第二个无效（得到一个红色的背景色）。

Password
[*****_____]

Re-enter Password
[*****_____]  // "valid" because it has the same value of the first password



...then the user modify the first password:

Password
[********__]

Re-enter Password
[*****_____]  // this component should be reevaluated and set itself to "invalid"

html prettyprint-override"><Input
    ...props...
    testingFunction={password => password && password === formState.password.value}
/>

我还试图通过添加以下属性更显式地传递值:dependencies={formstate.password.value}，但也不起作用。

那么，这种方法有什么问题，什么是强制重新评估第二个密码组件的好方法呢？

Answer 1

您可以使用useEffect在输入组件中运行重新评估。

例如。

import React, { useEffect } from "react";

interface IInputProps extends HTMLInputElement {
  reevaluate?: string;
}

const Input: React.FC<IInputProps> = (props: IInputProps) => {
  useEffect(() => {
    console.log("Run your evaluation code here - This code block will be run whenever `reevaluate` prop is changed");
  }, [props.reevaluate])

  return (
    <input type="text" />
  );
};