Реагируйте, пытаясь составить список динамических входов - PullRequest
Новая
       54

Реагируйте, пытаясь составить список динамических входов

0 голосов
/ 11 ноября 2019

Я создал этот сайт https://supsurvey.herokuapp.com/surveycreate/ Теперь я пытаюсь переместить интерфейс в React, чтобы я мог изучить React в процессе.

с vanila js было гораздо проще создавать элементы динамически,Я только что создал createElement, и после этого, когда я нажал кнопку «отправить», я зациклил все элементы Options и взял каждый вход target.value. поэтому я нажимаю только один раз в конце, когда нажимаю кнопку «Отправить», и все, теперь у меня есть список всех входных данных.

реагирует на каждое изменение в каждом поле ввода, вызывает метод «OnChange» и вызывает всплеск.targe.value для родителя, а в родительском я должен скопировать текущий массив параметров и переписать его при каждом изменении в каждом поле.

есть ли другой способ? потому что, кажется, сумасшедшая такая работа.

Options.jsx 

```import React, { Component } from "react";

class Option extends Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: "", index: props.index };
  }

  myChangeHandler = event => {
    this.setState({ inputValue: event.target.value });
    this.props.onChange(this.state.index, event.target.value);
  };

  render() {
    return (
      <input
        className="survey-answer-group"
        type="text"
        placeholder="Add Option..."
        onChange={this.myChangeHandler}
      />
    );
  }
}

export default Option;

______________________________________________________________________________
Options.jsx````

```import React, { Component } from "react";
import Option from "./option";

class Options extends Component {
  render() {
    console.log(this.props);
    return <div>{this.createOptions()}</div>;
  }

  createOptions = () => {
    let options = [];
    for (let index = 0; index < this.props.numOfOptions; index++) {
      options.push(
        <Option key={index} onChange={this.props.onChange} index={index} />
      );
    }
    return options;
  };
}

export default Options;```
______________________________________________________________________________

App.jsx

```import React from "react";

import OptionList from "./components/Options";
import AddButton from "./components/add-button";
import "./App.css";

class App extends React.Component {
  state = {
    numOfOptions: 2,
    options: [{ id: 0, value: "" }, { id: 1, value: "" }]
  };

  handleChange = (index, value) => {
    const options = [...this.state.options];
    console.log("from App", value);

    options[index].value = value;
    this.setState({
      options: options
    });

    console.log(this.state);
  };

  addOption = () => {
    const options = [...this.state.options];
    options.push({ id: this.state.numOfOptions + 1, value: "" });

    this.setState({
      numOfOptions: this.state.numOfOptions + 1,
      options: options
    });
  };

  submitButton = () => {};

  render() {
    return (
      <div className="poll-create-grid">
        <div id="poll-create-options">
          <OptionList
            onChange={this.handleChange}
            numOfOptions={this.state.numOfOptions}
          />
        </div>
        <button
          className="surveyCreate-main-btn-group"
          onClick={this.addOption}
        >
          Add
        </button>
        <button
          className="surveyCreate-main-btn-group"
          onClick={this.submitButton}
        >
          Submit
        </button>
      </div>
    );
  }
}

export default App;
```

1 Ответ

0 голосов
/ 11 ноября 2019

Итак, во-первых, проблема в том, как определяется ваш OptionList компонент.

Было бы неплохо передать options из состояния в компонент, а не количество опций 

<OptionList
   onChange={this.handleChange}
   options={this.state.options}
/>

Вы просто визуализируете параметры в компоненте OptionsList (я предполагаю, что он такой же, как Options здесь 

class Options extends Component {
...
  render() {
    return 
      (<div>{Array.isArray(this.props.options) && 
        this.props.options.map((option) => <Option 
          key={option.id}
          index={option.id}
          onChange={this.props.onChange}
          value={option.value}
        />)}
      </div>);
  }
...
}

Вы хотите использовать значениев компоненте Option.

this.props.onChange(this.state.index, event.target.value); Нет необходимости использовать здесь состояние, если честно

this.props.onChange(this.props.index, event.target.value); отлично

...