React如何实现点击按钮新增输入框并将输入值存入数组

你当前的代码存在的核心问题是直接将React组件存入了state，React的state设计用来存数据而非DOM元素，调整后即可实现输入值统一存入数组的需求，修改逻辑如下：

核心修改思路 #

• state的list数组存储纯数据，每个元素为包含id（输入项唯一标识）和value（输入框内容）的对象
• 输入框的渲染逻辑统一放到render方法中完成，和state数据一一绑定
• 新增输入变更监听方法，实时同步输入内容到state

完整修改后代码 #

import React from "react";
import { Button, FormInput } from "shards-react";
  
class Parameter extends React.Component {
  id = 1;
  state = {
    // 存储所有输入项的id和对应值
    list: []
  }

  // 同步输入框内容到state
  handleInputChange = (id, e) => {
    const updatedList = this.state.list.map(item => {
      if (item.id === id) {
        return {...item, value: e.target.value}
      }
      return item
    })
    this.setState({ list: updatedList })
  }

  // 删除对应输入项
  remove = (id) => {
    const filteredList = this.state.list.filter(item => item.id !== id)
    this.setState({ list: filteredList })
  }

  // 新增输入项
  addParam = () => {
    this.setState(prevState => ({
      list: [...prevState.list, { id: this.id, value: '' }]
    }))
    this.id++
  }

  // 获取所有输入值组成的数组，你可以在需要提交/使用数据的地方调用这个方法
  getInputValues = () => {
    return this.state.list.map(item => item.value)
  }
  
  render() {
    return (
      <div>
        <Button onClick={this.addParam} theme="primary">Add parameter</Button>
        {
          this.state.list.map(item => (
            <div key={item.id} className="d-flex align-items-center mb-1">
              <FormInput 
                placeholder="Competetion parameters"
                value={item.value}
                onChange={(e) => this.handleInputChange(item.id, e)}
              />
              <i className="material-icons ml-2" onClick={() => this.remove(item.id)}>delete</i>
            </div>
          ))
        }
        {/* 测试用：点击打印所有输入值数组，不需要可以删除 */}
        <Button onClick={() => console.log(this.getInputValues())} theme="secondary" className="mt-2">打印输入数组</Button>
      </div>
    );
  }
}

export default Parameter;

关键说明 #

• 所有输入框的内容会实时同步到state.list中，任何需要使用所有输入值的场景，直接调用getInputValues()方法即可得到所有内容组成的数组
• 删除功能已经恢复可用，删除时会同时移除state中对应的数据项

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