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函数应将一个项目添加到您的状态的（值？）数组中。虽然它不需要返回任何东西。您应该改为在渲染函数中遍历数组。

这是一个看起来像的例子

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

1 个答案: