ReactJS

Question

这里是初学者。我有一个使用地理位置 API 获取经纬度的按钮。我在我的控制台上得到了正确的位置，但我无法在输入框中显示它们（这样我可以稍后 post 位置信息）。下面是我的组件代码：

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。我相信你必须为你的 Field 设置一个 value 道具，对吗？

此外，正如@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
}

ReactJS - 获得点击的自由度并在输入中显示

ReactJS - get latitude on click and show it in input

javascript

redux-form