英文:
how to define keys within div class of react elements?
问题
我正在学习React-Js并创建一个表单。在调试过程中，我发现问题可能是没有为表单中的每个字段定义唯一的键。当我在表单中添加新记录时，无法看到字段中的值发生变化。以下是我的字段代码：
const AddTask = ({ onAdd, selectedTask, isReadOnly }) => {
console.log("selectedTask", selectedTask);
const [dte, setdte] = useState("");
const [rmk, setrmk] = useState("");
const [isChecked, setIsChecked] = useState(false);
const onSubmit = (e) => {
const data = {
dte,
rmk,
};
onAdd(data);
setdte("");
setrmk("");
};
return (
<form className="add-form" onSubmit={onSubmit}>
<div className="form-group row">
<label className="col-sm-2 col-form-label">Date </label>
<div className="col-sm-8">
<input
className="form-control"
type="Date"
placeholder="Add"
value={selectedTask?.dte || ""}
onChange={(e) => setdte(e.target.value)}
disabled={isReadOnly}
/>
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 col-form-label">Remarks </label>
<div className="col-sm-8">
<input
className="form-control"
type="text"
value={selectedTask?.rmk || ""}
onChange={(e) => setrmk(e.target.value)}
disabled={isReadOnly}
/>
</div>
</div>
</form>
);
};
希望这有助于你解决问题。
英文:
I am working on a form in react-Js as a beginner. During debugging I came to know the problem could be not defining the unique keys for every field in the form. I am not able to see the values changing in the field when adding new records in the form. here is my code for fields
const AddTask = ({ onAdd, selectedTask,isReadOnly }) => {
console.log("selectedTask",selectedTask);
const [dte, setdte] = useState("");
const [rmk, setrmk] = useState("");
const [isChecked, setIsChecked] = useState(false);
const onSubmit = (e) => {
const data = {
dte,
rmk,
}
onAdd(data);
setdte("");
setrmk("");
};
return (
<form className="add-form" onSubmit={onSubmit}>
<div className="form-group row">
<label className="col-sm-2 col-form-label">Date </label>
<div className="col-sm-8">
<input
className="form-control"
type="Date"
placeholder="Add"
value={selectedTask?.dte || ""}
onChange={(e) => setdte(e.target.value)}
//ref={dteRef}
disabled={isReadOnly}
/>
</div>
</div>
<div className="form-group row">
<label className="col-sm-2 col-form-label">Remarks </label>
<div className="col-sm-8">
<input
className="form-control"
type="text"
value={selectedTask?.rmk || ""}
// ref={rmkRef}
onChange={(e) => setrmk(e.target.value)}
disabled={isReadOnly}
/>
</div>
</div>
答案1
得分: 0
以下是翻译好的部分：
它与定义键没有任何关系，我们只需要更改值中条件的优先级如下：
value={ dte ||selectedTask?.dte }
value={ rmk || selectedTask?.rmk}
对于所有输入字段，这将解决问题。
英文:
it have nothing to do with defining keys we just have to change the priority of condition in value as:
value={ dte ||selectedTask?.dte }
value={ rmk || selectedTask?.rmk}
for all input fields it will solve the problem
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论