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

Question

如何判断用户是否在 React 的输入字段中输入了任何值。

我想要实现的是，当用户将 text/integer 输入卡片内的输入字段之一并且不单击保存按钮时，我想在卡片周围显示一个边框。

因此，应将边框添加到至少包含所有未保存的输入字段之一以及已更改的输入字段的卡片。

我正在使用下面 link 中提到的动态表单。

这是我的动态表单结构的 link（示例代码）：

Example Dynamic form link

动态表单是一个表单转发器，其中当我点击“添加新行”按钮时。新卡片将添加到反应页面。

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

当更改卡片的单个输入字段时，该卡片确实有边框，但是当我添加新卡片时。带有未保存输入字段的旧卡片的边框已移除。

我已经尝试解决这个问题一个星期了。我没有使用 formik 或 react-hook-form。我正在使用 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);
}
/>

Answer 1

您需要的是两种不同的状态 - 一种用于保存数据，一种用于当前数据：

const initialState = {
    firstName: "",
    lastName: "",
    age: ""
  };
  const [savedFormData, saveData] = useState(initialState);
  const [currentFormData, setCurrentFormData] = useState(initialState);

将 onChange 事件添加到您的 Form.Controls:

const handleChange = (name, value) => {
    setCurrentFormData((prev) => {
        return { ...prev, [name]: value };
    });
};

...

// in your Form.Control
onChange={(event) =>
    handleChange("firstName", event.target.value)
}

定义何时存在不安全数据：您可以将两种状态相互比较。仅仅说“用户输入时不同”是不够的，因为它可以再次删除，所以状态再次相同：

 const dataUnsafed =
    JSON.stringify(savedFormData) !== JSON.stringify(currentFormData);

最后，在保存时，您必须将当前数据状态复制到已保存的数据状态并调用您的 API 来保存数据：

 const onSave = () => {
    saveData(currentFormData);
    // Call your API here to persist your "savedFormData
  };

使用“dataUnsafed”设置卡片样式，这里我只是设置了一个较粗的边框：

<Card className={dataUnsafed ? "border-3" : ""}>...</Card>

https://codesandbox.io/s/busy-architecture-7it9g9

Answer 2

Returns 一个有状态的值，以及一个更新它的函数。在初始渲染期间，返回的状态 (state) 与作为第一个参数 (initialState) 传递的值相同。 setState 函数用于更新状态。它接受一个新的状态值并将组件的 re-render 入队。源 ---> https://reactjs.org/docs/hooks-reference.html#usestate

使用引用 useRef returns 一个可变的 ref 对象，其 .current 属性被初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。源 ---> https://reactjs.org/docs/hooks-reference.html#useref

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

How to find out if the user has enter any value in the input field in react

javascript

reactjs

react-bootstrap

react-hooks