React中结合map()、useState与函数实现表单输入绑定问题

首先，你的代码存在几个关键问题需要修正：

1. new是JavaScript保留关键字，不能用作state变量名，需改为newVal这类合法名称；
2. 字段配置数组fields里的value无需用对象包裹（如{min}），直接传入state变量即可；
3. check字段不能直接调用函数（checkOne(e, setMin)会在组件渲染时立即执行，且e未定义），应定义一个接收事件参数的回调函数。

修正后的完整代码示例 #

import { useState } from 'react';

function YourComponent() {
  // 修正state变量名，避免使用关键字
  const [min, setMin] = useState("");
  const [newVal, setNewVal] = useState("");

  // 校验函数示例（可替换为你的实际校验逻辑）
  const checkOne = (evt, setstate) => {
    const inputValue = evt.target.value;
    // 示例：仅保留数字内容
    const result = inputValue.replace(/[^0-9]/g, '');
    setstate(result);
  };

  // 另一个校验函数示例
  const checkTwo = (evt, setstate) => {
    const inputValue = evt.target.value;
    // 示例：去除首尾空格
    const result = inputValue.trim();
    setstate(result);
  };

  // 正确定义字段配置数组
  const fields = [
    {
      id: 1,
      value: min,
      onChange: (e) => checkOne(e, setMin),
      label: 'text1',
      placeholder: "15" // 修正拼写错误：placehoder → placeholder
    },
    {
      id: 2,
      value: newVal,
      onChange: (e) => checkTwo(e, setNewVal),
      label: 'text2',
      placeholder: "10"
    },
  ];

  return (
    <div>
      {fields.map((field) =>
        <div key={field.id}>
          <label>{field.label}</label><br/>
          {/* 直接绑定value和onChange事件 */}
          <input 
            type="text" 
            value={field.value} 
            onChange={field.onChange} 
            placeholder={field.placeholder} 
          />
        </div>
      )}
    </div>
  );
}

export default YourComponent;

核心说明 #

• 字段数组中的onChange是箭头函数，会接收输入框的事件对象e，再将e和对应的state设置函数传入校验函数；
• 渲染输入框时，直接将field.value绑定到value属性，field.onChange绑定到onChange事件即可；
• 修正了原代码中的拼写错误：placehoder改为标准的placeholder。

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