如何在 React 中构建 Form 组件

Question

我是 React.js 的新手，我正在尝试在 React 中构建表单生成器 - 类似于此 https://formbuilder.online/ - 我从一开始就开始使用按钮——我试图在按下按钮后通过其中一种方法添加一个文本字段——它对代码没有任何影响。至少它应该在控制台中打印一些东西但没有。请帮忙！！

import React from "react";
import ReactDOM from "react-dom";


export default class EditForm extends React.Component {
  constructor() {
    super();
    this.state = { values: [] };
    }


handleChange = (i, event) => {
  console.log("handle clicked test clear")
     // let values = [...this.state.values];
     // values[i] = event.target.value;
     // this.setState({ values });
  }


handleAddfeild = () => {
  return this.state.values.map((el, i) =>
     <div key={i}>
        <input type="text" value={el||''} onChange=    
 {this.handleChange.bind(this, i)} />
     </div>); 
// console.log("should add text field");
};


handleClearfeild = () => {
console.log("should remove the added feild")
};

handleSaveform = () => {
console.log("will save this form using node API")
}



render() {
 return (
   <div className="container-fluid">
          <button type="button" onClick={this.handleAddfeild}
          className="small">Add Text Feild
          </button>

          <button type="button" onClick={this.handleSaveform}
                  className="small">Save Form
          </button>

          <button type="button" onClick={this.handleClearfeild}
                  className="small">Clear
          </button>

  </div>
    );
  }
}

Answer 1

您的 handleAddfeild 函数应该将一个项目添加到您所在州的（值？）数组中。不过它不需要 return 任何东西。您应该在渲染函数中遍历数组。

这是一个可能看起来像的例子

import React from 'react';
import ReactDOM from 'react-dom';

export default class EditForm extends React.Component {
  constructor() {
    super();
    this.state = { values: [] };
  }

  handleChange = (i, event) => {
    console.log('handle clicked test clear');
    // let values = [...this.state.values];
    // values[i] = event.target.value;
    // this.setState({ values });
  };

  handleAddfeild = () => {
    let fields = this.state.values;
    fields.push({ value: '' });
    this.setState({ values: fields });
    // console.log("should add text field");
  };

  updateFieldValue = index => event => {
    let fields = this.state.values;
    fields[index].value = event.target.value;
    this.setState({ values: fields });
    event.persist();
    return false;
  };

  handleClearfeild = () => {
    console.log('should remove the added feild');
  };

  handleSaveform = () => {
    console.log('will save this form using node API');
  };

  render() {
    const fields = this.state.values.map((field, i) => {
      return (
        <div key={i}>
          <input
            type="text"
            value={field.value || ''}
            onChange={this.updateFieldValue(i)}
          />
        </div>
      );
    });
    return (
      <div className="container-fluid">
        <button type="button" onClick={this.handleAddfeild} className="small">
          Add Text Feild
        </button>

        <button type="button" onClick={this.handleSaveform} className="small">
          Save Form
        </button>

        <button type="button" onClick={this.handleClearfeild} className="small">
          Clear
        </button>

        {fields}
      </div>
    );
  }
}

如何在 React 中构建 Form 组件

how to build a Form component in react

reactjs

forms

building