Question

初学者。我有一个使用地理位置API获取纬度和经度的按钮。我在控制台上得到的位置很好，但是我在输入框中显示它们时遇到了问题（以便我可以稍后发布位置信息）。下面是我的组件代码：

export class GetLocation extends Component{
constructor(){
    super();
    this.state = {
        latitude: '',
        longitude: ''
    };
    this.getMyLocation = this.getMyLocation.bind(this);

}

ComponentDidMount(){
    this.getMyLocation();
}
getMyLocation = (e) => {
let location = null;
let latitude = null;
let longitude = null;
if (window.navigator && window.navigator.geolocation) {
    location = window.navigator.geolocation
}
if (location){
    location.getCurrentPosition(function (position) {
        latitude = position.coords.latitude;
        longitude= position.coords.longitude;
        console.log(latitude);
        console.log(longitude);
    })
}
    this.setState({latitude: latitude, longitude: longitude})

}

render(){
    return(
    <div>
        <p>Your location is </p>
        <Field name="latitude" component="input" onChange={this.getMyLocation}/>
        <button type="button" onClick={this.getMyLocation}>Get Geolocation</button>
    </div>

    );
}
}

我正在使用redux-form，此组件是向导表单的一部分（如果您想知道Field组件）

Answer 1

ComponentDidMount应为componentDidMount。我相信您必须为value权利设置Field支柱吗？

另外，正如@bennygenel所提到的，你不需要在构造函数中绑定getMyLocation，因为你已经在使用箭头函数（我在我的例子中做了，随意改变它）。要在this.state的回调中访问getCurrentPosition，您需要bind成功回调或使用箭头功能。

＆＃13;

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      latitude: '',
      longitude: '',
    }

    this.getMyLocation = this.getMyLocation.bind(this)
  }
  
  componentDidMount() {
    this.getMyLocation()
  }

  getMyLocation() {
    const location = window.navigator && window.navigator.geolocation
    
    if (location) {
      location.getCurrentPosition((position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        })
      }, (error) => {
        this.setState({ latitude: 'err-latitude', longitude: 'err-longitude' })
      })
    }

  }

  render() {
    const { latitude, longitude } = this.state
    
    return (
      <div>
        <input type="text" value={latitude} />
        <input type="text" value={longitude} />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

Answer 2

与其他答案一样，您需要将经度和纬度值传递给输入，这样您才能显示但是还有另一个问题。您没有在正确的位置设置经度和纬度。

if (location){
    location.getCurrentPosition(function (position) {
        latitude = position.coords.latitude;
        longitude= position.coords.longitude;
        console.log(latitude);
        console.log(longitude);
        this.setState({
           latitude: latitude, 
           longitude: longitude
        }); // you should set state when you have the values.
    }.bind(this)); // you need to bind this so you can use setState
}

ReactJS - 获取点击的纬度并在输入中显示它

2 个答案: