React.js中如何获取多选Select值并同步到textarea后提交表单

步骤1：开启Select多选功能 #

给<select>标签添加multiple属性，启用多选功能，可选添加size属性设置显示行数，提升多选操作体验。

步骤2：修正表单数据处理逻辑 #

移除原函数中多余的event.preventDefault()（onChange事件无需阻止默认行为），同时处理多选Select的数组值，将其转换为适合在textarea显示的字符串格式（如逗号分隔、换行分隔）。

步骤3：绑定Textarea与Select状态 #

让textarea的value属性直接绑定到Select对应的状态字段，实现选中值的实时同步显示。

完整代码示例 #

import { useState } from 'react';

function IngredientForm() {
  // 初始化表单状态，listIngr存储多选Select的值，quantity保留textarea编辑能力
  const [addFormData, setAddFormData] = useState({
    listIngr: '',
    quantity: ''
  });

  const handleformData = (event) => {
    const fieldName = event.target.getAttribute("name");
    let fieldValue = event.target.value;

    // 处理多选Select：提取所有选中选项的value，转为指定格式的字符串
    if (event.target.tagName === 'SELECT' && event.target.multiple) {
      // 用换行分隔每个选项，也可替换为', '改为逗号分隔
      fieldValue = Array.from(event.target.selectedOptions)
        .map(option => option.value)
        .join('\n');
    }

    const newFormData = { ...addFormData };
    newFormData[fieldName] = fieldValue;
    setAddFormData(newFormData);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 执行表单提交逻辑，比如发送API请求
    console.log('提交数据:', addFormData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <select 
        name="listIngr" 
        onChange={handleformData} 
        multiple
        size={2}
      >
        <option value="Apple">Flour</option>
        <option value="Milk">Milk</option>
      </select>
      <textarea 
        id="textArea" 
        name="quantity" 
        value={addFormData.listIngr} 
        onChange={handleformData} 
        placeholder="选中的选项会显示在这里..."
      />
      <button type="submit">Add</button>
    </form>
  );
}

export default IngredientForm;

关键说明 #

• 多选Select的selectedOptions是选中选项的集合，通过Array.from转为数组后，可提取每个选项的value或textContent拼接成需要的格式。
• 如果需要保留textarea的独立编辑能力，可调整状态绑定逻辑，比如让textarea同步显示Select值，但修改textarea时不影响Select状态（根据需求调整即可）。
• 表单提交时，addFormData会包含处理后的Select选中值和textarea内容，可直接用于后续提交操作。

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