在键入和记录输入的e.target.value时,我得到了默认值+最后一个击键,但没有重新渲染。我猜想React无法识别状态发生了变化,但是在寻找正确的方法时遇到了问题。
这是有问题的代码
const [text, setText] = useState(task.text);
console.log(text);
const handleInputChange = (e) => {
setText(e.target.value);
};
const taskInput = (
<form>
<input type='text' value={text} onChange={handleInputChange} />
</form>
);
完整文件:
import React, { useContext, useState } from "react";
import { TaskContext } from "../context/TaskState";
const Task = ({ task }) => {
const { deleteTask } = useContext(TaskContext);
const { changeStatus } = useContext(TaskContext);
const taskText = (
<div
className='task-text'
onClick={() => changeStatus({ ...task, done: !task.done })}
style={task.done ? { textDecoration: "line-through" } : null}
>
{task.text}
</div>
);
const [text, setText] = useState(task.text);
console.log(text);
const handleInputChange = (e) => {
setText(e.target.value);
};
const taskInput = (
<form>
<input type='text' value={text} onChange={handleInputChange} />
</form>
);
const [option, setOption] = useState(taskText);
return (
<div className='task-container'>
<button className='task-edit' onClick={() => setOption(taskInput)}>
edit
</button>
<button className='task-delete' onClick={() => deleteTask(task.id)}>
x
</button>
{option}
</div>
);
};
export default Task;
我正在为其他应用程序和化简器使用全局状态。
答案 0 :(得分:0)
我认为,您输入的onChange
可能会导致此错误。尝试更换它:
onChange={handleInputChange}
与此:
onChange={(e) => handleInputChange(e)}
e
对象可能不会传递给您的方法。
答案 1 :(得分:0)
请尝试将您的taskInput值包装在具有依赖项useMemo
的{{1}}中,因为在重新渲染期间将JSX存储为变量时,由于它们不知道使用的变量,它们引用的是先前的值价值改变了。
text
答案 2 :(得分:0)
问题是我在jsx内部传递选项的方式。
我将选项状态设置为布尔值,将taskText和taskInput转换为函数,并在jsx中有条件地传递了选项。
import React, { useContext, useState } from "react";
import { TaskContext } from "../context/TaskState";
const Task = ({ task }) => {
const { deleteTask } = useContext(TaskContext);
const { changeStatus } = useContext(TaskContext);
const taskText = () => {
return (
<div
className='task-text'
onClick={() => changeStatus({ ...task, done: !task.done })}
style={task.done ? { textDecoration: "line-through" } : null}
>
{task.text}
</div>
);
};
const [text, setText] = useState(task.text);
console.log(text);
const handleInputChange = (e) => {
setText(e.target.value);
};
const taskInput = () => {
return (
<form>
<input type='text' value={text} onChange={handleInputChange} />
</form>
);
};
const [option, setOption] = useState(true);
return (
<div className='task-container'>
<button className='task-edit' onClick={() => setOption(!option)}>
edit
</button>
<button className='task-delete' onClick={() => deleteTask(task.id)}>
x
</button>
{option ? taskText() : taskInput()}
</div>
);
};
export default Task;