如何发现用户是否在react的输入字段中输入了任何值。
我想要实现的是，当用户将文本/整数输入到卡片内的输入字段之一并且不单击保存按钮时，我想在卡片周围显示一个边界。
所以边框应该添加到包含所有未保存的输入字段和更改的输入字段中的至少一个的卡片中。
我使用的是下面链接中提到的动态形式。
这是我的动态表单结构的链接(示例代码):
动态表单链接动态表单是一个表单重复器，其中当我点击"添加新行"按钮。新的卡片将被添加到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);
}
/>
您需要的是两个不同的状态-一个用于保存，一个用于当前数据:
const initialState = {
firstName: "",
lastName: "",
age: ""
};
const [savedFormData, saveData] = useState(initialState);
const [currentFormData, setCurrentFormData] = useState(initialState);
为窗体添加onChange事件。控制:
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
您可以使用更改事件侦听器来查找输入何时被更新。
<input type="text" name="search">
document.querySelector('input[type="text"]')
.addEventListener("change", (e) => {
console.log("triggered");
})