React中如何获取DOM输入的数组类型值？

你当前的代码存在问题：input标签的value属性只接受字符串或数值类型，直接传入数组会被隐式转为逗号分隔的字符串；同时onChange事件中e.target.value拿到的也是字符串，无法直接作为数组存入state。

下面分两种常见场景给出正确实现：

场景1：单个输入框，输入逗号分隔内容转为数组 #

适合需要用户输入类似1,2,3或苹果,香蕉这类内容，自动转为数组的场景：

import { useState } from 'react';

function ArrayInput() {
  const [arr, setArr] = useState([]);

  const handleChange = (e) => {
    // 按逗号分割输入内容，去除空格并过滤空项
    const inputStr = e.target.value;
    const newArr = inputStr.split(',').map(item => item.trim()).filter(item => item);
    setArr(newArr);
  };

  return (
    <div>
      <input 
        value={arr.join(', ')} 
        onChange={handleChange} 
        placeholder="输入逗号分隔的内容，如：1, 2, 3"
      />
      <p>当前数组：{JSON.stringify(arr)}</p>
    </div>
  );
}

export default ArrayInput;

核心逻辑：

• 给input的value绑定数组转成的逗号分隔字符串（arr.join(', ')）
• 触发onChange时，将输入的字符串分割、处理后转为数组存入state

场景2：多个复选框，选中项组成数组 #

适合需要用户从多个选项中选择，选中项自动组成数组的场景：

import { useState } from 'react';

function MultiCheckbox() {
  const [selectedItems, setSelectedItems] = useState([]);
  const options = ['前端', '后端', '测试', '产品'];

  const handleCheckboxToggle = (e) => {
    const selectedValue = e.target.value;
    if (e.target.checked) {
      // 选中时添加到数组，避免重复
      setSelectedItems(prev => [...prev, selectedValue]);
    } else {
      // 取消选中时从数组移除对应项
      setSelectedItems(prev => prev.filter(item => item !== selectedValue));
    }
  };

  return (
    <div>
      {options.map(option => (
        <label key={option} style={{marginRight: '10px'}}>
          <input
            type="checkbox"
            value={option}
            checked={selectedItems.includes(option)}
            onChange={handleCheckboxToggle}
          />
          {option}
        </label>
      ))}
      <p>选中的选项：{JSON.stringify(selectedItems)}</p>
    </div>
  );
}

export default MultiCheckbox;

核心逻辑：

• 每个复选框的checked状态由数组是否包含对应值决定
• 触发onChange时，根据选中状态添加或移除数组中的对应项

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