Reactjs 如何在handlechange中获取FormValue？

在我的表单中，其中一个表单字段上有一个onChange事件：

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

现在我得到这个.props.values=未定义？如何获取FormValue

您需要创建一个自定义的

输入

您需要截取并更新redux的

input.onChange

函数

可选--如果希望其他表单值影响此值，则使用reduxForm的

formSelector

和

react redux

的

connect

的

MapStateTrops

访问

this.props

中组件内的formProps（下面的工作示例已经包含此功能）

组件/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;

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

从“React”导入React；
常量自定义输入=({
//我们将截取redux的“onChange”func，同时保留另一个
//按“inputProps”中的原样输入道具
输入：{onChange，…inputProps}，
//下面的“handleChange”函数是处理输入更改的父函数
handleChange，
//“rest”包含任何附加属性（类名、占位符、类型…等）
休息
}) => (
//我们将“输入道具”和“其他”道具展开，然后添加
//返回“事件”和
//将“onChange”函数输入到“handleChange”父函数
handleChange（e，onChange）}/>
);
导出默认自定义输入；

容器/Form.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;

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

class ControlledFormValue扩展了PureComponent{
//此父函数将通过“event.target.value”处理更新；
//可以更改/更改该值，然后将其传递给输入的
//“onChange”funct更新字段
handleChange=（{target:{value}}，onChange）=>{
//这将通过在每次输入更新后添加“-”来更改值
onChange（`${value}-`）；
setTimeout（（）=>console.log（this.props.values），500）；
};
render（）{
返回(
名字
等
);
}
}

---

工作示例：

我正在寻找一个带有getFormValues的解决方案，因为我使用的是FieldArray。formvalues是一个行列表，每行有一个表示该行的对象。我实际上简化了这个问题。更新了上面的示例和codesandbox。更改输入，它将打印出当前表单值。您只需将

getFormValues

添加到

mapstatetrops

。请注意，

mapstatetops

是

异步的

，因此您必须等待更新（因此设置超时）。