[英]react hooks: input onChange first character can not be deleted
I got some inputs to create/update a formular,我有一些输入来创建/更新公式,
1) if value={question}, everything works except that I can not delete the last character (= first character of the input) 1)如果值={问题},除了我不能删除最后一个字符(=输入的第一个字符)外,一切正常
2) if I dont mention value, it's all good except when I want to change questions orders with Chevron icon button, database is well changed but input value is still displayed at the last place. 2)如果我不提到价值,这一切都很好,除非我想用雪佛龙图标按钮更改问题订单,数据库已更改但输入值仍显示在最后一个位置。
<input
type="text"
value={question}
placeholder="blabla"
onChange={event => {
event.preventDefault();
const value = event.target.value;
setUpdatedQuestion(value);
}}
/>
I tried to add if (event.target.value == "" || event.target.value) to onChange but does not work either我试图将 if (event.target.value == "" || event.target.value) 添加到 onChange 但也不起作用
OK I found something, but it is a McGyver tip, not very clean : adding one space before all new add question ahah.好的,我找到了一些东西,但这是 McGyver 的提示,不是很干净:在所有新添加问题之前添加一个空格啊哈。 But then I can't see my placeholder anymore :/
但是后来我再也看不到我的占位符了:/
FYI : question is coming from a questions.map, setUpdatedQuestion do update questions, newOrder also do update questions仅供参考:问题来自 questions.map,setUpdatedQuestion 做更新问题,newOrder 也做更新问题
//in QuestionsContent.js (questions is a questions tab)
const QuestionsContent = props => {
return (
<form onSubmit={onSubmit}>
{isLoading === false && questions.length > 0
? questions.map((question, i) => {
return (
<div key={i}>
<QuestionLine
{...question}
questions={questions}
setQuestions={setQuestions}
setNewOrder={setNewOrder}
/>
</div>
);
})
: null}
<button
onClick={event => {
event.preventDefault();
setAddQuestion({
question: null,
type: "texte"
});
}}
>
Add a question
</button>
</form>
);
};
//in QuestionLine.js:
const QuestionLine = ({
question,
setNewOrder,
setQuestions,
questions
}) => {
const [updatedQuestion, setUpdatedQuestion] = useState("");
// * UPDATE QUESTION *******************************
useEffect(() => {
if (updatedQuestion !== "") {
const tab = [];
for (let j = 0; j < questions.length; j++) {
if (j === i) {
const newObject = {
question: updatedQuestion,
type: type
};
console.log("adding updatedQuestion ===>", newObject);
tab.push(newObject);
} else {
tab.push(questions[j]);
}
}
setQuestions(tab);
setUpdatedQuestion("");
}
}, [updatedQuestion]);
return (
<div >
{/* QUESTION */}
<input
type="text"
value={question}
placeholder="blabla"
onChange={event => {
event.preventDefault();
const value = event.target.value;
setUpdatedQuestion(value);
}}
/>
</div>
);
};
thanks for your precious help感谢您的宝贵帮助
问题可能出在 useEffect 中的条件:当您要删除字符串的最后一个字符时,updatedQuestion 的状态为空,因此不执行条件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.