const [formData, setFormData] = useState({});

  useEffect(() => {
    fetch("/formdata")
      .then((res) => res.json())
      .then((data) => setFormData(data));
  }, []);

  console.log("Form Data", formData);

  //Sorting by order
  let attr;
  form.forms.map((y) => {
    return (attr = y.formAttributes.sort((a, b) => {
      return a.order < b.order ? -1 : 1;
    }));
  });

return (
{attr.map((attri, index) => {
              return (
                <TextField
                  key={index}
                  label={attri.label}
                  value={formData[attri.datakey] || ""}
                  onChange={event => {const {value} = event.target; setFormData({formData: value})}}
                />
              );
            })}
)

我想寻求帮助,了解如何管理Textfield onChange区域中的多个字段?目前,如果我要输入一个值,则不会发生任何更改.

这是我的密码.

try 使用e.target的方法.价值,但它仍将保持不变.

enter image description here enter image description here

推荐答案

您应该添加name属性,其中"name"是对象中键值对的key.

例如

  <TextField
              key={index}
              name="somename"
              label={attri.label}
              value={formData[attri.datakey] || ""}
              onChange={handleChange}
            />

然后可以这样更新字段.

setFormData({
   ...formData,
   [e.target.name]: e.target.value // becomes "somename: some value"
})

Javascript相关问答推荐

当试图显示小部件时,使用者会出现JavaScript错误.

构造HTML表单以使用表单数据创建对象数组

在Three JS中看不到补间不透明度更改效果

在使用HighChats时如何避免Datatables重新初始化错误?

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

在Java中寻找三次Bezier曲线上的点及其Angular

查询参数中的JAVASCRIPT/REACT中的括号

Node.js API-queryAll()中的MarkLogic数据移动

如何根据查询结果重新排列日期

JAVASCRIPT SWITCH CASE语句:当表达式为';ALL';

使用可配置项目创建网格

对不同目录中的Angular material 表列进行排序

在每次重新加载页面时更改指针光标

:host::ng-Deep不将样式应用于material 复选框

在openstreemap/leaflet中,当鼠标在 map 上移动时,如何在小工具提示中实时显示坐标

如何解析/data/build中的Angularnode_modules/chart.js/dist/Chart.js?

在继续循环之前,请等待带有异步调用的函数完成

Redux不更新状态

在p5.js中,2D数组位图读取器不支持同一行中的重复 colored颜色

如何在链接函数中使用原始缓冲区?