Reactjs React places autocomplete--使用autocompleted时，如何设置三个输入的状态？

要完成组件的每个位置都需要有inputprops，这将有一个指向handleChange的onChange，但handleChange仅设置address1的状态，因为我知道当每个输入都有地址时，如何更新每个地址的状态。因此，在我的示例中，我有三个位置来完成组件，我希望第一个位置用来设置address1的状态，第二个位置用来设置address2的状态，第三个位置用来设置address3的状态。我如何更改代码，使每个位置都能完成相应地址1、地址2或地址3的状态

class AutoCompleteForm extends React.Component {
 constructor() {
  super()
  this.state = {
   address1: '',
   address2: '',
   address3: ''
 }
}


handleChange = (address) => {
  this.setState({
      address1: address, 
    })
  }

render() {
  const inputProps = {
    value: this.state.address,
    onChange: this.handleChange,
    placeholder: "Enter a location"
  }

  return (
    <form onSubmit={this.handleFormSubmit}>
      <PlacesAutocomplete inputProps={inputProps} />
      <PlacesAutocomplete inputProps={inputProps} />
      <PlacesAutocomplete inputProps={inputProps} />
      <button type="submit">Find Midpoint</button>
    </form>
  )
}
} 

export default AutoCompleteForm

class AutoCompleteForm扩展了React.Component{
构造函数（）{
超级（）
此.state={
地址1:“”，
地址2:“”，
地址3:'
}
}
handleChange=（地址）=>{
这是我的国家({
地址1：地址：，
})
}
render（）{
常量输入属性={
值：this.state.address，
onChange:this.handleChange，
占位符：“输入位置”
}
返回(
找到中点
)
}
} 
导出默认自动完成表单

一种方法是编写3个不同的函数来处理所有3个不同的

自动完成

handleChange1 = (address) => {
  this.setState({
    address1: address, 
  })
 }

handleChange2 = (address) => {
  this.setState({
    address3: address, 
  })
 }

然而，上面的一个将添加更多代码并重复相同的逻辑。如果您可以使用某种模式，那么我们可以使用单个函数来执行逻辑。
假设您的状态为
address1
，
address2
，
address3

现在让我们编写一个包含两个参数的函数。一个是实际的自动完成地址，另一个是州名

handleAddressChange = (address, stateName) => {
  this.setState({
   [stateName]: address, 
  });
}

现在，让我们修改渲染以发送状态名称

render() {
  const inputProps = {
    value: this.state.address,
    placeholder: "Enter a location"
  }

  return (
    <form onSubmit={this.handleFormSubmit}>
      <PlacesAutocomplete inputProps={inputProps} onChange={(address) => {this.handleAddressChange(address, 'address1')}} />
      <PlacesAutocomplete inputProps={inputProps} onChange={(address) => {this.handleAddressChange(address, 'address2')}} />
      <PlacesAutocomplete inputProps={inputProps} onChange={(address) => {this.handleAddressChange(address, 'address3')}} />
      <button type="submit">Find Midpoint</button>
    </form>
  )
}

render（）{
常量输入属性={
值：this.state.address，
占位符：“输入位置”
}
返回(
{this.handleAddressChange（地址，'address1'）}/>
{this.handleAddressChange（地址，'address2'）}/>
{this.handleAddressChange（地址，'address3'）}/>
找到中点
)
}

现在，当调用
onChange
时，这将设置相应的状态。
我也遇到过类似的情况

我是怎么解决的？按照以下列出的步骤操作：

0）按如下方式声明构造函数：

constructor(props) {
  super(props);
  this.state = {
    latLngObj: {}
  }
}

<Fragment>
            {
              Object.keys(this.props.selectedLocations).map((i) => {
                return(
                  <div key={i} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                    <label className="spacer-right">{this.state.selectedLocations[i].label}: </label>
                    <PlacesAutocomplete inputProps={{value: this.state[`address_${this.props.selectedLocations[i].label.toLowerCase()}`], onChange: (address) => {this.handleAddressChange(address, `address_${this.props.selectedLocations[i].label.toLowerCase()}`)}}} />
                  </div>
                )
              })
            }
          </Fragment>

1） 在render（）外部声明下面的函数{}

2） 我有一个预先选择的位置循环，所以我像这样使用它：

constructor(props) {
  super(props);
  this.state = {
    latLngObj: {}
  }
}

<Fragment>
            {
              Object.keys(this.props.selectedLocations).map((i) => {
                return(
                  <div key={i} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                    <label className="spacer-right">{this.state.selectedLocations[i].label}: </label>
                    <PlacesAutocomplete inputProps={{value: this.state[`address_${this.props.selectedLocations[i].label.toLowerCase()}`], onChange: (address) => {this.handleAddressChange(address, `address_${this.props.selectedLocations[i].label.toLowerCase()}`)}}} />
                  </div>
                )
              })
            }
          </Fragment>

我可能会因为这个答案而迟到，但我希望这个答案能在将来对有同样问题的人有所帮助

谢谢你，最好

罗希特·帕尼克尔