Redux-form：基於另一個按鈕點擊觸發onFhange事件on fireld

Question

這是this問題的補充問題。

我所試圖做的事：

我有一個按鈕，點擊上得到我的當前位置。該按鈕還應該填寫值爲<Field>的組件，以便我可以稍後提交。

發生了什麼事：

我Field成分是不知道有什麼變化，所以我不能提交值。 redux狀態沒有被填充，我認爲這是因爲Field onchange事件沒有被觸發。我試圖直接設置狀態到onChange，但它不工作（可能不應該）。

感謝您幫助這個noob的人。

export class GetLocation extends Component{ 
constructor(){ 
    super(); 
    this.state = { 
     latitude: '', 
     longitude: '' 
    }; 
    this.getMyLocation = this.getMyLocation.bind(this); 
} 
componentWillMount(){ 
    console.log('mon') 
    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> 
     <p>Your location is </p> 
     <Field 
      name="latitude" 
      type="text" 
      component="input" 
      onChange={this.state.latitude} 
     /> 
     {/*<input name="latitude" value={this.state.latitude} />*/} 
     {/*<input type="text" name="longitude" value={longitude} />*/} 
     <button type="button" onClick={this.getMyLocation}>Get Geolocation</button> 
    </div> 

    ); 
} 
} 

這是我wizardform代碼：

import React from "react"; 
import { Field, reduxForm, FormSection } from "redux-form"; 
import validate from "../middleware/validate"; 
import { Address, Camp, GetLocation } from "../components/renderField"; 
import {connect} from "react-redux"; 

const renderError = ({ meta: { touched, error } }) => 
    touched && error 
? <span> 
    {error} 
    </span> 
: false; 

let WizardFormSecondPage = props => { 
    const { handleSubmit, previousPage} = props; 
    return (
    <form onSubmit={handleSubmit} className="form-horizontal"> 
     <div className="panel"> 
     <div className="form-group"> 
      <label className="control-label col-sm-2" htmlFor="address"> 
      Location 
      </label> 
      <div className="col-sm-10"> 
      <p className="help-block lead">Write your address below</p> 
      <p className="help-block">You can add more than one. Add as many as you can.</p> 

     <div className="row"> 
      <div className="col-sm-12"> 
       <p className="label-lead">Own Address</p> 
       <FormSection name="ownAddress" component={Address}> 
        <Address /> 
       </FormSection> 

       <p className="label-lead">Host Address</p> 
       <FormSection name="hostAddress" component={Address}> 
        <Address /> 
       </FormSection> 

       <p className="label-lead">Camp</p> 
       <FormSection name="camp" component={Camp}> 
        <Camp /> 
       </FormSection> 

       <p className="label-lead">Location Coordinates</p> 
       <FormSection name="location" component={GetLocation}> 
        <GetLocation /> 
       </FormSection> 
      </div> 
     </div> 
     </div>    
    </div> 

    <div className="form-group"> 
    <label className="control-label col-sm-2">Household</label> 
    <div className="col-sm-10"> 
     <p className="help-block lead">Who are you in your household?</p> 
     <p className="help-block">It can be a husband, wife, children or grandparent. Select the appropriate one. </p> 
     <Field name="houseHold" component="select" className="form-control"> 
      <option /> 
     <option value="1">None</option> 
     <option value="2">Husband</option> 
     <option value="3">Spouse</option> 
     <option value="4">Child-1</option> 
     <option value="5">Child-2</option> 
     </Field> 
    </div> 

    </div> 

    <div> 
     <button type="button" className="previous" onClick={previousPage}> 
     Previous 
     </button> 
     <button type="submit" className="next"> 
     Next 
     </button> 
    </div> 
    </div> 
</form> 
); 
}; 

export default reduxForm({ 
    form: "wizard", //     <------ same form name 
    destroyOnUnmount: false, //  <------ preserve form data 
    forceUnregisterOnUnmount: true, // <------ unregister fields on  unmount 
    validate 
})(WizardFormSecondPage); 

Answer 1

我會使用的方法change設置緯度字段的值在你的終極版店，所以getMyLocation看起來像：

getMyLocation() { 
    const location = window.navigator && window.navigator.geolocation; 
    if (location) { 
     location.getCurrentPosition(position => { 
     this.props.change("latitude", position.coords.longitude); 
     }); 
    } 
    } 

和你的領域將只是：

<Field name="latitude" component="input" /> 

查看沙箱here