Блог

В моей форме у меня есть событие onChange в одном из полей формы:

         <div>
            <label>Last Name</label>
            <div>
                <Field
                    name="lastName"
                    component="input"
                    type="text"
                    placeholder="Last Name"
                    onChange={() => this.handleChange()}
                />
            </div>
        </div>
  

Когда запускается handleChange, я хочу получить formvalues :

 handleChange(){
        //do calculation
        console.log('handlechange',this.props.values)        
    }
  

На данный момент я получаю это.props.values = undefined? Как я могу получить formvalues?

1. Вам нужно будет создать пользовательский input .
2. Вам нужно перехватить и обновить input.onChange функцию redux.
3. Необязательно — Если вы хотите, чтобы другие значения формы влияли на это значение, тогда используйте reduxForm formSelector с react-redux ‘s connect ‘s mapStateToProps для доступа к formProps внутри компонента в this.props (рабочий пример ниже уже включает эту функциональность)

components/CustomInput.js

 import React from "react";

const CustomInput = ({
  // we'll intercept redux's "onChange" func, while leaving the other 
  // input props as is in "inputProps"
  input: { onChange, ...inputProps }, 
  // the "handleChange" func below is the parent func that will handle input changes
  handleChange, 
  // "rest" contains any additional properties (className, placeholder, type ...etc)
  ...rest 
}) => (
  // we spread out the "inputProps" and the "rest" of the props, then we add
  // an "onChange" event handler that returns the "event" and the 
  // input's "onChange" func to our "handleChange" parent func
  <input {...inputProps} {...rest} onChange={e => handleChange(e, onChange)} />
);

export default CustomInput;
  

containers/Form.js

 class ControlledFormValue extends PureComponent { 

  // this parent func will handle updates through the "event.target.value"; 
  // the value can be changed/altered and then passed to the input's
  // "onChange" func to update the field
  handleChange = ({ target: { value } }, onChange) => {
    // this will alter the value by adding a "-" after each input update
    onChange(`${value}-`);
    setTimeout(() => console.log(this.props.values), 500);
  };

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <Field
              className="uk-input"
              name="firstName"
              component={CustomInput}
              type="text"
              placeholder="First Name"
              handleChange={this.handleChange}
            />
          </div>
        </div>
        ...etc
     </form>
    );
  }
}
  

Рабочий пример: https://codesandbox.io/s/lx1r4yjwy7