如何在handlechange中获取表单值? [英] How to get formvalues in handlechange?

问题描述

在我的表单中，我在其中一个表单域上有一个 onChange 事件:

 
<label>姓氏</label><div><字段姓名=姓氏"组件=输入"类型=文本"占位符="姓氏"onChange={() =>this.handleChange()}/>

当 handleChange 被触发时，我想获取表单值:

handleChange(){//做计算console.log('handlechange',this.props.values)}

目前我得到 this.props.values = undefined?如何获取表单值?

解决方案

1. 您需要创建一个自定义input.
2. 您需要拦截并更新 redux 的 input.onChange 函数.
3. 可选 -- 如果你想让其他表单值影响这个值，那么使用 reduxForm 的 formSelector 和 react-redux 的 >connect 的 mapStateToProps 以访问 this.props 中组件内的 formProps(下面的工作示例已经包含此功能)

components/CustomInput.js

从react"导入React；常量自定义输入 = ({//我们将拦截 redux 的onChange"函数，而留下另一个//在inputProps"中输入道具输入:{ onChange, ...inputProps },//下面的handleChange"函数是处理输入变化的父函数处理更改，//rest" 包含任何附加属性(className、placeholder、type ...等)...休息}) =>(//我们展开inputProps"和rest"的道具，然后我们添加//一个onChange"事件处理程序，它返回事件"和//输入的onChange"函数到我们的handleChange"父函数<input {...inputProps} {...rest} onChange={e =>handleChange(e, onChange)}/>);导出默认自定义输入；

容器/Form.js

class ControlledFormValue extends PureComponent {//这个父函数将通过event.target.value"处理更新；//可以更改/更改值，然后将其传递给输入//"onChange" func 来更新字段handleChange = ({ target: { value } }, onChange) =>{//这将通过在每次输入更新后添加-"来改变值onChange(`${value}-`);setTimeout(() => console.log(this.props.values), 500);};使成为() {返回 (<form onSubmit={this.props.handleSubmit}><div><label>名字</label><div><字段类名=英国输入"名字=名字"组件={自定义输入}类型=文本"占位符=名字"handleChange={this.handleChange}/>

...等等</表单>);}}

工作示例:https://codesandbox.io/s/lx1r4yjwy7

In my form I have an onChange event on one of the formfields:

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

When handleChange gets fired I want to get the formvalues :

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

At the moment I am getting this.props.values = undefined? How can I get the formvalues?

解决方案

1. You'll need to create a custom input.
2. You'll need to intercept and update redux's input.onChange function.
3. Optional -- If you want other form values to influence this value, then utilize reduxForm's formSelector with react-redux's connect's mapStateToProps to access formProps within the component in this.props (the working example below already includes this functionality)

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>
    );
  }
}

Working example: https://codesandbox.io/s/lx1r4yjwy7

这篇关于如何在handlechange中获取表单值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！