React 尝试制作动态输入列表

Question

我已经建立了这个网站 https://supsurvey.herokuapp.com/surveycreate/ 现在我正在尝试将前端移动到 React，以便我可以在此过程中学习 React。

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

在响应每个输入字段中的每个更改时调用“OnChange”方法并将 e.targe.value 冒泡到父级，在父级中我必须复制当前的选项数组并重写每个字段中的每个更改.

还有其他方法吗？因为这样工作似乎很疯狂。

选项.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); 很好