尝试制作动态输入列表

Question

我已经建立了这个网站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;
```

Answer 1

首先，问题与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);很好