强制重新评估子组件

Question

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

所以在Form 组件中，我想在每次第一个密码的值更改时触发对第二个密码Input 的重新评估。

在Form 中，我将第一个密码的值存储在useReducer 状态中，我认为在组件的props 中传递它会自动触发重新评估，但事实并非如此。

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"

我这里把第二个组件的props中的第一个密码的值传进去了：

<Input
    ...props...
    testingFunction={password => password && password === formState.password.value}
/>

我还尝试通过添加此属性更明确地传递值：dependencies={formState.password.value}，但它也不起作用。

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

Answer 1

您可以使用useEffect 在您的Input 组件中运行您的re-evaluation。

例如

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" />
  );
};