Redux-form：基于另一个按钮单击在fireld上触发onChange事件 [英] Redux-form : triggerring onChange event on fireld based on another button click

问题描述

这是这个问题。

我正在尝试做的事：

我点击当前位置。此按钮还应该使用值填充< Field> 组件，以便稍后提交。

发生了什么：

我的字段 code>组件不知道任何更改，所以我无法提交该值。 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; （位置）{
 location.getCurrentPosition（（position）=> {
 this.setState（{
 latitude：position.coords.latitude，
经度：position.coords.longitude，
}）
}，（error）=> {
 this.setState（{latitude：'err-latitude'，longitude：' err-longitude'}）
}）
} 
} 
 
 render（）{
 const {latitude，longitude} = this.state; 
 return（
< div> 
< p>您的位置是< / p> 
< Field 
 name =latitude
 type =text
 component =input
 onChange = {this.state.latitude} 
 /> 
 {/ *< input name =latitudevalue = {this.state.latitude} /> * /} 
 {/ *< input type =textname =longitudevalue = {longitude} /> * /} 
< ; button type =buttononClick = {this.getMyLocation}>获取地理位置< / button> 
< / div> 
 
）; 
 
 
 code $ 
 
 
 
这是我的 wizardform  code：
  import从react反应; 
从redux-form导入{Field，reduxForm，FormSection}; 
从../middleware/validate导入验证; 
从../components/renderField导入{Address，Camp，GetLocation}; 
从react-redux导入{connect}; 
 
 const renderError =（{meta：{touched，error}}）=> 
已触及&&错误
？ <跨度> 
 {error} 
< / span> 
：false; 
 
让WizardFormSecondPage = props => {
 const {handleSubmit，previousPage} =道具; 
 return（
< form onSubmit = {handleSubmit} className =form-horizo​​ntal> 
< div className =panel> 
< div className = form-group> 
< label className =control-label col-sm-2htmlFor =address> 
位置
< / label> 
< div className =col-sm-10> 
< p className =help-block lead>在下面写下你的地址< / p> 
< p className = < / p> 
 
< div className =row> 
< div>您可以添加多个。 className =col-sm-12> 
< p className =label-lead>自己的地址< / p> 
< FormSection name =ownAddresscomponent = {Address} > 
< Address /> 
< / FormSection> 
 
< p className =label-lead>主机地址< / p> 
 < FormSection name =hostAddresscomponent = {Address}> 
<地址/> 
< / FormSection> 
 
< p className =label-lead> Camp< / p> 
< FormSection name =campcomponent = {Camp}> 
< Camp /> 
< / FormSection> 
 
< p className =label-lead>位置坐标< / p> 
< FormSection name =locationcomponent = {GetLocation}> 
< GetLocation /> 
< / FormSection> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< div className =form-group> 
< label className =control-label col-sm-2>家居< / label> 
< div className =col-sm-10> 
 
< p className =help-block>可以是丈夫，妻子，孩子或祖父母。选择适当的一个。 < / p为H. 
< Field name =houseHoldcomponent =selectclassName =form-control> 
< option /> 
< option value =1>无< / option> 
< option value =2>丈夫< / option> 
< option value =3>配偶< / option> 
< option value =4> Child-1< / option> 
< option value =5> Child-2< / option> 
< / Field> 
< / div> 
 
< / div> 
 
< div> 
< button type =buttonclassName =previousonClick = {previousPage}> 
上一个
< / button> 
< button type =submitclassName =next> 
下一个
< /按钮> 
< / div> 
< / div> 
< / form> 
）; 
}; 
 
导出默认值reduxForm（{
 form：wizard，//< ------相同的表单名称
 destroyOnUnmount：false，//<  - ----保存表单数据
 forceUnregisterOnUnmount：true，//< ------注销unmount字段
 validate 
}）（WizardFormSecondPage）; 
  
 
 
解决方案
我会使用方法更改以在您的Redux商店中设置纬度字段的值，因此 getMyLocation 将如下所示：
  getMyLocation（）{
 const位置= window.navigator&& window.navigator.geolocation; 
 if（location）{
 location.getCurrentPosition（position => {
 this.props.change（latitude，position.coords.longitude）; 
}）; 
 
 
 $ / code $ / pre 
 
 
你的字段将会是：
 < Field name =latitudecomponent =input/> 
  
查看沙盒这里 
 
this is a suppliment question of this question. 

What I am trying to do: 

I have a button that gets my current location on click. This button should also fill the <Field> component with values, so that I can submit it later. 

What's happening: 

My Field component is unaware of any changes, so I can't submit the value. the redux state isn't being populated and I think it is happening because the Field onchange event isn't being triggered. I tried setting the state directly to onChange, but it isn't working (probably shouldn't either).

Thanks for helping out this noob person. 
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>

    );
}
}
this is my wizardform code: 
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);

解决方案
I would use the method change to set the value of the latitude field in your Redux store, so getMyLocation will look like:
getMyLocation() {
    const location = window.navigator && window.navigator.geolocation;
    if (location) {
      location.getCurrentPosition(position => {
        this.props.change("latitude", position.coords.longitude);
      });
    }
  }
and your field will be just:
 <Field name="latitude" component="input"  />
See the sandbox here

                        
这篇关于Redux-form：基于另一个按钮单击在fireld上触发onChange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！