如何在React Js

Question

我想在每次点击加号图标时添加新输入，而是始终将其添加到最后。我希望它被添加到被单击的项目旁边。

以下是我使用的React代码。

＆＃13;

＆＃13;

const Input = props => (
  <div className="answer-choice">
    <input type="text" className="form-control" name={props.index} />
    <div className="answer-choice-action">
      <i onClick={props.addInput}>add</i>
      <i>Remove</i>
    </div>
  </div>
);

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      choices: [Input]
    };
  }
  addInput = index => {
    this.setState(prevState => ({
      choices: update(prevState.choices, { $splice: [[index, 0, Input]] })
    }));
  };
  render() {
    return (
      <div>
        {this.state.choices.map((Element, index) => {
          return (
            <Element
              key={index}
              addInput={() => {
                this.addInput(index);
              }}
              index={index}
            />
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"));

＆＃13;

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

＆＃13;

＆＃13;