Javascript 如何找出用户是否在输入字段中输入了任何值

如何确定用户是否在react中的输入字段中输入了任何值.

我试图实现的是，当用户在卡片中的一个输入字段中输入文本/整数，并且不单击保存按钮时，我希望在卡片周围显示一个边框.

因此，应该将边框添加到包含至少一个未保存的输入字段以及已更改的输入字段的卡中.

我正在使用下面链接中提到的动态表单.

这是我的动态表单的 struct 链接(示例代码):

Example Dynamic form link

动态表单是一个表单重复器，当我点击"添加新行"按钮时.新卡将添加到react页面.

这张新卡将有一组相同的字段和相同的默认值.当用户更改卡中的任何输入字段时.需要在卡片上添加边框.如果用户单击"保存"按钮，则应保存输入字段.

当对一张卡的单个输入字段进行更改时，该卡实际上是一个边框，但是当我添加一张新卡时.带有未保存输入字段的旧卡的边框将被删除.

我已经试着解决这个问题一周了.我没有使用formik或react-hook表单.我正在使用react bootstrap 库.

当用户将数据输入到输入字段时，我发现很难更改卡的边框.

我使用三元语句来判断字段是否更改.

我使用的useState钩子如下:

const [isFieldChanged, setisFieldChanged] = useState(false);

I am using handleClick function this to set useState variable:
    const handleClick = () => {
        setisFieldChanged(true);
    };

这些是所有字段，这是我设置默认值的方式:

    const [inputFields, setInputFields] = useState([
        {
            fieldName: "",
            label: "",
            fieldSet: "",
            cardinality: 0,
            required: false,
            defaultValue: "",
            weight: 0,
        },
    ]);

下面是三元语句的代码:

<Card
    id={`${inputField.id}`}
    className={
    isFieldChanged &&
    index !== 0 &&
    (inputFields.length) <= (index + 1) &&
    (inputField.cardinality !== 0 ||
    inputField.fieldName.length !== 0 ||
    inputField.label.length !== 0 ||
    inputField.fieldSet.length !== 0 ||
    inputField.required !== false ||
    inputField.defaultValue.length !== 0)
    ? " mt-2 border border-warning"
    : " mt-2 "
    }
>

对于每个表单控件，我都将onKeyPress添加到调用handleClick函数中:

<Form.Control
    type="text"
placeholder="fieldName"
    name="fieldName"
    data-cy="name-text-field"
    value={inputField.fieldName}
    onChange={(event) => {
    handleInputChange(index, event);
    }}
    onKeyPress = {(event)=>{
    handleClick(index, event);
}
/>