动态响应更改材料 UI 文本字段中输入值的数组

Question

我正在尝试更改一系列可用项目中的项目名称inputvalue：-

// lets say i've projects like so
const projects = [
{ _id: 1, name: 'Project 1' },
{ _id: 2, name: 'Project 2' },
{ _id: 3, name: 'Project 3' }
]
const Projects = () = {
// declaration of state
const [projectName, setProjectName] = useState('')
const [projectId, setProjectId] = useState('')
const [isSubmit, setIsSubmit] = useState(false) 
// handle submission of updated input
useEffect(() => {
(async() => {
if(isSubmit) {
// do fetch post submission to server
// reset everything back
setProjectName('')
setIsSubmit(false)
}
})();
}, [isSubmit])
return (
<>
<table>
<thead>
<tr>
<th>Name</th>
<th>Submission</th>
</tr>
</thead>
<tbody>
<tr>
{projects && projects.map(project => (
<form 
key={project._id}
onSubmit={(e) => {
e.preventDefault()
setProjectId(project._id)
setIsSubmit(true)
}}
>
<td>
<TextField
required
label="Name" 
value={project.name} 
onChange={(e) => setProjectName(e.target.value)}    
/>
</td>
<td>
<Button type="submit">Update</Button>
</td>
</form>
))}
</tr>
</tbody>
</table>
</>
)
}

不幸的是，由于value={project.name}，在这种情况下，onChange事件基本上根本不起作用。 顺便说一句，这也将引入新问题，其中以下数组的所有inputTextField 也将更新。

我怎样才能使用 React 实现这一点？使用 Vanilla JavaScript 执行此操作要简单得多。不知道我如何使用 React 实现这一点。还是这种方式，不推荐？相反，我应该创建一个可以单独处理项目名称更改的Modal或东西？

我的目标是从表本身启用直接更新。

Answer 1

所以，关于第一个问题：

由于 value={project.name}，onChange 事件基本上根本不起作用

这是因为您的onChange使用setProjectName，它绑定(因为useState)projectName变量。

如果您使用value={projectName}则onChange将起作用，但不会执行您想要的操作。

要实现这一点，就是让 React 状态管理所有项目数组：

// Your initial data.
const projectsDefault = [
{ _id: 1, name: 'Project 1' },
{ _id: 2, name: 'Project 2' },
{ _id: 3, name: 'Project 3' }
]
const Projects = () => {
// The only needed state to manage projects
const [projects, setProjects] = useState(projectsDefault)

const [projectId, setProjectId] = useState('')
const [isSubmit, setIsSubmit] = useState(false)

// You can write it on the "onChange" event, but it's better to have a handle function.
// Also, i'm using the index, but you can use the ID, it's just a example.
const handleNameChange = (name, index) => {
// You can use a functional setState, so you get the old value and do some updates on it, and return the new state.
setProjects(oldState => {
oldState[index].name = name
return oldState
})
}
// handle submission of updated input
useEffect(() => {
(async() => {
if(isSubmit) {
// do fetch post submission to server
setIsSubmit(false)
}
})();
}, [isSubmit])
return (
<>
<table>
<thead>
<tr>
<th>Name</th>
<th>Submission</th>
</tr>
</thead>
<tbody>
<tr>
{projects && projects.map((project, index) => (
<form 
key={project._id}
onSubmit={(e) => {
e.preventDefault()
setProjectId(project._id)
setIsSubmit(true)
}}
>
<td>
<TextField
required
label="Name" 
value={project.name} 
onChange={(e) => handleNameChange(e.target.value, index)}    
/>
</td>
<td>
<Button type="submit">Update</Button>
</td>
</form>
))}
</tr>
</tbody>
</table>
</>
)
}

Answer 2

我认为解决方案即将完成。从我的 react 17.0.2 开始，它没有检测到数组已更改，因此需要伪造。

const [changed, setChanged] = useState(0)
const randomize = ()=> setChanged(Math.random())
const handleNameChange = (name, index) => {
// You can use a functional setState, so you get the old value and do some updates on it, and return the new state.
setProjects(oldState => {
oldState[index].name = name
return oldState
})
randomize();
}

React 需要认为某些事情发生了变化，编辑