动态表单：TypeError：无法读取未定义的属性“值”

Question

已解决

问题是onChange的值错误。

public onChange = (e:any, key:any) => {
  this.setState({
    [key]: e.target.value
  });
};

在将数据输入表单时，我似乎很难摆脱一个错误。我正在使用TSX React。

目标是能够动态创建表单。我一直遇到的问题是无法读取输入的值。我想知道是否有人可以看一下我的代码，也许发现我的错误，所以我在这一点上一无所知。

我正在使用最新的@ types / react

DynamicForm.tsx

import * as React from "react";

export interface InterfaceDynamicFormProps {
  title: string;
  text: string;
  model: Array<{
    key: string;
    label: string;
    inputs: string;
    type: string;
    value: any;
  }>;
  onSubmit: (model: any) => void;
}

export default class DynamicForm extends React.Component<
  InterfaceDynamicFormProps
> {
  public state = {
  };

  constructor(props: any) {
    // Fetch all properties
    super(props);
  }

  public onSubmit = (e: any) => {
    e.preventDefault(); // Prevent full refresh
    if (this.props.onSubmit) {
      this.props.onSubmit(this.state);
    }
  };

  public onChange = (e:any, key:any) => {
    this.setState({
      [key]: this[key].value **THIS PART CANNOT READ THE VALUE OF MY FORM**
    })
  };

  public renderForm = () => {
    const model = this.props.model;

    const formUI = model.map(m => {
      const key = m.key;
      const type = m.type || "text"; // default text
      const inputs = m.inputs; // default input set to empty

      return (
        <div key={key} className="form-inline">
          <div className="col-sm-4 text__new-item">
            <label
              className="form-label"
              key={"l" + m.key} // Adding l to make a unique key. "l" for label
              htmlFor={m.key}
            >
              {m.label}
            </label>
          </div>
          <div className="col-sm-8 new-item--input form-inline">
            <input
              className={inputs}
              type={type}
              key={"i" + m.key} // Adding i to make a unique key. "i" for input
              onChange={(e)=>{this.onChange(e, key)}}          
            />
          </div>
        </div>
      );
    });
    return formUI;
  };

  // Render Title area and content box
  public render() {
    const title = this.props.title;
    const text = this.props.text;

    return (
      <div className="container container__body">
        <div className="row">
          <div className="col-sm-12">
            <div className="body__title-page">
              <a>
                <p>{title}</p>
              </a>
              <h2>{text}</h2>
            </div>
          </div>
        </div>

        {/* Render form area */}
        <div className="container">
          <div className="top__input">
            <div className="row">
              <div className="col-sm-12 col-lg-4">
                <div className="row">
                  <div className="col-12">
                    <form
                      className="dynamic-form"
                      onSubmit={e => {
                        this.onSubmit(e);
                      }}
                    >
                      {this.renderForm()}
                      <div className="form-group">
                        <button type="submit">submit</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这是我从另一个文件中输入的内容，我在其中将该组件称为

component.tsx

<DynamicForm 
  title="Facturatie"
  text="Nieuwe factuur aanmaken"
  model={[ // Creates form labels and inputs, binds the
      { key: 'factuurnummmer',  label: 'Factuurnummer:',    inputs: 'smallInput', type: 'text', value: ''},
      { key: 'datum',           label: 'Datum:',            inputs: 'smallInput', type: 'text', value: ''},
      { key: 'opdrachtgever',   label: 'Opdrachtgever:',    inputs: 'smallInput', type: 'text', value: ''},
      { key: 'referentie',      label: 'Referentie:',       inputs: 'smallInput', type: 'text', value: ''},
      { key: 'factuurnummer',   label: 'Factuurnummer:',    inputs: 'smallInput', type: 'text', value: ''},
      { key: 'factuuradres',    label: 'Factuuradres:',     inputs: 'smallInput', type: 'text', value: ''},
      { key: 'debiteurennummer',label: 'Debiteurennummer:', inputs: 'smallInput', type: 'text', value: ''},
      { key: 'email',           label: 'Email:',            inputs: 'smallInput', type: 'text', value: ''},
      { key: 'btw',             label: 'BTW:',              inputs: 'smallInput', type: 'text', value: ''},
      { key: 'btwbedrag',       label: 'BTW bedrag:',       inputs: 'smallInput', type: 'text', value: ''},
      { key: 'exclbtw',         label: 'Excl BTW:',         inputs: 'smallInput', type: 'text', value: ''},
      { key: 'totaalbedrag',    label: 'Totaal Bedrag:',    inputs: 'smallInput', type: 'text', value: ''},      
  ]}
  onSubmit = {(model) => {this.onSubmit(model)}} // submit prop
/>

Answer 1

您想使用事件目标的value。

public onChange = (e:any, key:any) => {
  this.setState({
    [key]: e.target.value
  });
};