Reactjs 如何使用MaterialUI和Redux将文本字段更改设置为状态？

使用React/Redux和MaterialUI设置一个组件，该组件需要检查您的位置或根据您输入的地址获取lat/lng

当点击一个按钮时，我希望在Web服务上检查输入到文本字段中的地址

但是，我似乎无法使用按钮获取Web服务的TextField值

所以我试着在道具（状态）中立即设置值。 这是可行的，但我确实遇到了一个错误：

警告：组件正在更改要控制的文本类型的非受控输入。输入元件不应从非受控切换到受控（反之亦然）

此代码如下所示：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux form”导入{Field，reduxForm}
从“物料界面/文本字段”导入文本字段；
从“物料界面/图标按钮”导入图标按钮；
从“材料ui图标/位置”导入位置图标；
从“材料ui图标/搜索”导入搜索图标；
从“../actions”导入{getLocationByAddress，GetLocationByTalng}；
/**
*位置搜索，允许用户搜索其位置和坐标
*@class-LocationSearch
*@extends.Component
*/
类LocationSearch扩展了组件{
/**
*getLocationByLatLng：使用navigator.geolocation获取用户的当前位置

*然后从后端服务请求信息以检索完整的位置数据。
*/
getLocationByLatLng（）{
让选项={
EnableHighAccurance:正确，
超时：5000，
最大值：0
};
navigator.geolocation.getCurrentPosition（函数（pos））{
控制台日志（位置坐标）；
}，函数（err）{
console.warn（`ERROR（${err.code}）：${err.message}`）；
}，选项）
}
/**
*getLocationByAddress：使用地址从后端服务请求完整的位置数据
*/
getLocationByAddress=（e）=>{
/*
控制台日志（e）；
e、 预防默认值（）；
*/
this.props.getLocationByAddress（this.props.location.address）；
};
keepVal=（{target}）=>{
this.props.location.address=target.value；
};
渲染（）{
const{location}=this.props；
返回(
);
}
}
函数MapStateTops（状态）{
返回{
地点：state.location
}
}
导出默认连接（MapStateTrops，{getLocationByAddress，GetLocationByTalng}）（LocationSearch）

请参阅中受控组件的代码。在代码中，

值

属性从状态中提取，并且

onChange

被设置为更新状态的函数

   <div>
    <TextField id="standard-name" label="Name" value={name} onChange={handleChange} />
    <TextField id="standard-uncontrolled" label="Uncontrolled" defaultValue="foo" />
  </div>

你真的很接近。您已经将状态映射到您的

位置

道具，并且设置了

值={location.address}

，但是

onChange

被分配给

this.keepVal

，它试图更新道具，这是不好的

---

由于您正在使用Redux，因此需要在

keepVal

中调度一个操作，该操作将使用

事件.target.value

更新

状态.location.address

。这将确保组件

值

是从状态填充的，并且触发的

onChange事件的更改会更新存储。
为什么要将文本字段值存储在props中？您应该使用SetState将其存储在状态中，因为我也在使用redux？组件更新自己的道具是一种反模式。如果你在redux中存储状态，你应该使用dispatch方法。我知道，我不需要道具，但需要能够从操作和输入中更改它。正确，如果你需要了解redux的帮助，我会在redux上查看Dan AbramovLink的这篇文章不再有效。请将相关代码解决方案作为答案的一部分与链接一起发布。@JWiley谢谢。更新。