React JS：onChange 动态文本字段

Question

您好，我刚开始学习反应，我正在尝试将响应中的数据动态传递给我的 TextField，我做到了，但似乎 TextField 不可编辑（onChange function 似乎不起作用）。

这是我的 state 挂钩：

 const [passParamData, setPassParamData] = useState([]);

这是我用来从响应中获取数据的 function（使用 axios）：

const retrievePassParam = useCallback(() => {
    PasswordMaintenanceService.retrievePassParameter()
      .then((response) => {
        console.log("PasswordMaintenancePage - retrievePassParam response.data >>> " , response.data)
        console.log("PasswordMaintenancePage - retrievePassParam JSON.stringify(response.data) >>> " + JSON.stringify(response.data))
        setPassParamData(response.data);
      }).catch((err) => {
        console.log("PasswordMaintenancePage - retrievePassParam catch >>> " + err)
      })
    });

下面的代码是我将响应中的数据传递给动态 TextField

 {
        passParamData.map(({paramID,value, index}) =>{
        return(
          <div key={paramID}>                       
          <TextField       
            label={paramID} 
            variant="outlined" 
            value={value} 
            onChange={event => {handleTextChange(paramID)}}
          />               
          </div>
       )             
       })
     }

这是我的 onChange function：

 const handleTextChange = useCallback((paramID, event) =>{

const inputVal = [ ...passParamData];
inputVal[paramID] = event.target.value;
setPassParamData(inputVal)

});

动态文本字段还有其他方法可以编辑吗？ 我真的陷入了困境，任何帮助将不胜感激。 先感谢您！

Answer 1

您的 onChange 不起作用的原因是因为您仅将一个参数传递给 function 并在 function 中接收 2。

<TextField       
  label={paramID} 
  variant="outlined" 
  value={value} 
  onChange={handleTextChange(paramID)}
/> 

然后您可以在handleTextChange中将其作为双箭头 function 接收。

const handleTextChange = (paramID) => (event) => {
  const inputVal = passParamData.map((p) => {
                               if(p.id === paramID) {
                                  return {
                                     ...p,
                                     value: e.currentTarget.value
                                  }
                               }
                               return p;
                           });
  setPassParamData(inputVal)
};

此外，您正在使用 useCallback 但没有给出任何依赖关系。 尝试在useCallback中提供所有依赖项或将其全部删除。

const handleTextChange = useCallback((paramID) => (event) => {
  const inputVal = passParamData.map((p) => {
                               if(p.id === paramID) {
                                  return {
                                     ...p,
                                     value: e.currentTarget.value
                                  }
                               }
                               return p;
                           })
  setPassParamData(inputVal)
}, [passParamData]);