动态反应材料ui TextField中输入值的变化数组

Question

我正在尝试在可用项目数组中更改我的项目名称的input value：-

// 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 事件在这种情况下基本上不会起作用。 顺便说一句，这也将引入新问题，以下数组的所有input TextField 也将被更新。

如何使用 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>
     </>
  )
}