英文:
How to set states inside ifcondition in functional component
问题
setEditOnClick(true)的中文翻译是setEditOnClick(true)`。
你的代码如下：
const peopleCard = () => {
const [isEditOnclick, setEditOnClick] = useState(false);
const [peopleID, setpeopleID] = useState('');
return (
.....
.....其他一些代码
.....
{isEditOnclick ?
<CrudModal id={peopleID} />
{setEditOnClick(false)}
: null }
}
......
......
<button onMouseEnter={() => setEditOnClick(true)}}
希望这可以帮助你解决问题。
英文:
How to set setEditOnClick(true) on condition inside functional component
const peopleCard = () => {
const [isEditOnclick, setEditOnClick] = useState(false);
const [peopleID, setpeopleID] = useState('');
return (
.....
.....some other code
.....
{isEditOnclick ?
<CrudModal id={peopleID} />
{setEditOnClick(false)}
: null }
}
......
......
<button onMouseEnter={() => setEditOnClick(true)}}
Am new to react kindly help me to fix this
答案1
得分: 0
你不应该在你的JSX代码中设置状态'setEditOnClick(true)'，因为这实际上会取消渲染CrudModal组件。相反，你应该执行以下操作：
const PeopleCard = () => {
const [isEditOnclick, setEditOnClick] = useState(false);
const [peopleID, setpeopleID] = useState('');
// 定义一个处理按钮的鼠标进入事件的函数
// 检查isEditOnclick当前是否为false
// 使用setEditOnClick函数将isEditOnclick设置为true
const handleMouseEnter = () => {
if (!isEditOnclick) {
setEditOnClick(true);
}
};
// 渲染组件的JSX代码
return (
<>
{/* 一些其他代码 */}
{isEditOnclick && <CrudModal id={peopleID} />}
{/* 一些其他代码 */}
<button onMouseEnter={handleMouseEnter}>Edit</button>
</>
);
};
英文:
You should not set the state 'setEditOnClick(true)' inside your JSX code because you are basically unrendering the CrudModal component. Instead, you should do the following:
const PeopleCard = () => {
const [isEditOnclick, setEditOnClick] = useState(false);
const [peopleID, setpeopleID] = useState('');
// Define a function to handle the mouse enter event on the button
// Check if isEditOnclick is currently false
// Set isEditOnclick to true using the setEditOnClick function
const handleMouseEnter = () => {
if (!isEditOnclick) {
setEditOnClick(true);
}
};
// Render the component's JSX code
return (
<>
{/* some other code */}
{isEditOnclick && <CrudModal id={peopleID} />}
{/* some other code */}
<button onMouseEnter={handleMouseEnter}>Edit</button>
</>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论