Как получить значения форм в ручке смены? - PullRequest
Новая
       6

Как получить значения форм в ручке смены?

1 голос
/ 31 марта 2019

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

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

Когда сработает handleChange, я хочу получить значения формы: 

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

В данный момент яя получаю this.props.values ​​= undefined?Как я могу получить значения формы?

1 Ответ

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

компонентов / 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;

контейнеров / 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

...