React.js中点击加号图标后在点击项旁添加输入框的实现

我来帮你搞定这个需求！你现在遇到的问题是点击加号时新输入框总是被加到列表末尾，想要把它放在被点击的项目旁边对吧？咱们来一步步调整代码：

原代码的问题分析 #

你的代码里把Input组件直接存在了state的choices数组中，这不是React的常规做法，而且如果没引入immutability-helper库的话，update函数还会报错。更关键的是，原插入逻辑虽然指定了索引，但因为组件存储方式的问题，渲染时没能正确把新输入框放在目标位置。

修改后的完整代码 #

React代码 #

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

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    // 改成存数据，初始一个空输入框对应的数据项
    this.state = { choices: [''] };
  }

  addInput = index => {
    this.setState(prevState => ({
      // 在点击项的下一个位置插入新数据项，渲染时就会在当前输入框后出现新输入框
      choices: [
        ...prevState.choices.slice(0, index + 1),
        '',
        ...prevState.choices.slice(index + 1)
      ]
    }));
  };

  // 补全删除输入框的功能
  removeInput = index => {
    this.setState(prevState => ({
      choices: prevState.choices.filter((_, i) => i !== index)
    }));
  };

  render() {
    return (
      <div>
        {this.state.choices.map((_, index) => {
          return (
            <Input
              key={index}
              addInput={this.addInput}
              removeInput={this.removeInput}
              index={index}
            />
          );
        })}
      </div>
    );
  }
}

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

HTML代码 #

<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>

关键改动说明 #

• state存数据而非组件：把choices改成存储输入框对应的数据（这里用空字符串作为初始值），组件根据数据动态渲染，这是React的标准数据流模式，逻辑更清晰也更容易维护。
• 调整addInput的插入位置：使用数组的扩展运算符和slice方法，在点击项的下一个索引位置插入新的数据项，这样渲染时新输入框就会出现在当前点击的输入框旁边（紧挨着后面）。
• 补全删除功能：顺便完善了删除输入框的逻辑，让整个功能更完整。

内容的提问来源于stack exchange，提问作者Narayanan S