编辑表单 React JS

Posted 2023-02-25

【中文标题】编辑表单 React JS

【英文标题】：Edit Form React JS

【发布时间】：2020-08-25 05:01:17

【问题描述】：

我正在使用 React js 制作一个编辑表单。我在表单中有多个组件。在其中一个子组件中，我将所做的所有更改传递给主组件中的挂钩，以在 firebase 中进行更改。

父组件

const [changes, setChanges] = useState();
const updateGenData = (genData) => 
    setChanges(genData);  
  

儿子组件（我通过道具从父亲那里获取所有信息）

const UpdateProfileGenData = (props) => 

 const [values, setValues] = useState();
 const [changes, setChanges] = useState();

 useEffect(() => 
    setValues(props);
 ,[props]); 

 const field1, field2, field3 = values;

 useEffect(() => 
    props.updateGenData(changes);
,[changes]); 

  const handleChange= e => 
        setValues(
            ...values,
            [e.target.name]: e.target.value
        );
         setChanges(
          ...changes,
          [e.target.name]: e.target.value
      ) 
    
return (

<input type="text" name="field1" value=field1 onChange=handleChange/>
<input type="text" name="field2" value=field2 onChange=handleChange/>
<input type="text" name="field3" value=field3 onChange=handleChange/>

);

export default UpdateProfileGenData;

当我将值从子组件传递给父组件时，它不允许我编辑子表单。我无法更改任何字段。

有什么建议吗？？

问候

【问题讨论】：

如何将 props 传递给 UpdateProfileGenData 组件？你能为此提供一个代码框或类似的东西吗？

【参考方案1】：

你为什么经常使用useEffect？问题可能是您经常使用useEffect 并且在某个地方正确覆盖了数据。 可以变得更容易：

父组件

const [changes, setChanges] = useState();
const updateGenData = (genData) => setChanges(...changes, ...genData);  

子组件

const UpdateProfileGenData = (field1, field2, field3, updateGenData) => 

  const handleChange= e => updateGenData(
            [e.target.name]: e.target.value,
        );

return (

<input type="text" name="field1" value=field1 onChange=handleChange/>
<input type="text" name="field2" value=field2 onChange=handleChange/>
<input type="text" name="field3" value=field3 onChange=handleChange/>

);

export default UpdateProfileGenData;