我已经建立了这个网站 https://supsurvey.herokuapp.com/surveycreate/ 现在我试图将前沿转向React，以便在此过程中学习React。

使用vanila js，动态创建元素要容易得多。 我只是创建了createElement，然后单击“提交”按钮 我循环抛出Option的所有元素，并获取每个target.value输入。 因此，当我单击“提交”时，最后只循环了1次，就是这样，我现在有了所有输入的列表。

在反应每个输入字段中的每个更改时，都会调用“ OnChange”方法并将e.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;
```