Redux-form：別のボタンに基づいてfireldのonChangeイベントをトリガーする

Question

これはthis質問のサプリメントの質問です。

私がやろうとしています何

：

私はクリックで自分の現在位置を取得するボタンがあります。このボタンは、<Field>コンポーネントに値を入力して、後で送信することもできます。

何が起こっている

：

私Fieldコンポーネントは、すべての変更を認識しないので、私は値を提出することはできません。還元状態にデータが入力されていないので、Field onchangeイベントがトリガーされていないために発生していると思います。状態を直接onChangeに設定しようとしましたが、動作していません（おそらくどちらかではありません）。

このノブの人を助けてくれてありがとう。

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

私はあなたのReduxのストアに緯度フィールドの値を設定する方法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