如何设置Material UI文本框的值？EsriGeocode自动补全街道名问题

问题根源 #

当前代码在选中自动补全选项时，直接将完整地址赋值给了街道名称字段，没有从Esri返回的地理编码结果中提取单独的街道名称属性。

修改步骤 #

1. 提取Esri结果中的街道名称 #

Esri地理编码服务返回的结果对象中，attributes属性包含了地址各组成部分的细分字段（比如Street对应街道名称）。修改Autocomplete的onChange事件处理逻辑，从选中的选项中提取街道名称：

// 针对你的Autocomplete组件，调整onChange回调逻辑
<Autocomplete
  // 保留完整地址作为选项展示，方便用户识别选择
  getOptionLabel={(option) => option.displayName}
  onChange={(event, newValue) => {
    if (newValue) {
      // 优先从Esri返回的属性中提取街道名称，兼容不同返回结构做降级处理
      const streetName = newValue.attributes?.Street || newValue.displayName.split(',')[0].trim();
      setFormData(prev => ({ ...prev, street: streetName }));
    } else {
      setFormData(prev => ({ ...prev, street: '' }));
    }
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      label="街道名称"
      value={formData.street} // 绑定表单的street字段值
      onChange={(e) => setFormData(prev => ({ ...prev, street: e.target.value }))}
    />
  )}
/>

2. 确认输入框值绑定正确 #

确保TextField的value属性严格绑定formData.street，这样选中选项后输入框会显示提取出的街道名称，而非完整地址。

3. 适配Esri返回字段差异 #

如果attributes.Street不符合你的实际返回结构，可以在控制台打印newValue查看具体字段名（比如部分服务可能用Address或StAddr作为街道字段名），调整提取逻辑即可。

内容的提问来源于stack exchange，提问作者Damien