как построить компонент Form в реакции - PullRequest
Новая
       15

как построить компонент Form в реакции

0 голосов
/ 28 апреля 2019

Я новичок в React.js и пытаюсь построить построитель форм в реакции - что-то похожее на это 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>
    );
  }
}

1 Ответ

0 голосов
/ 28 апреля 2019

ваша handleAddfeild функция должна добавлять элемент в массив (values?) Вашего состояния.Однако не нужно ничего возвращать.Вместо этого вы должны перебрать массив в вашей функции рендеринга.

Вот пример того, как это может выглядеть

Edit zljp13932m

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