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

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，因为你已经使用了箭头函数（我在我的例子中做过，可以随意更改它）。为了能够访问getCurrentPosition内部的this.state的回调函数，您需要使用bind成功回调函数或者使用箭头函数。

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') 
 
)

<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>

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 
}