如何仅在动态生成的第二个输入框中显示重复内容验证错误？

嘿，这个问题好办！咱们只需要把验证逻辑和错误提示都精准绑定到第二个输入框上就行，具体可以这么实现：

1. 针对性维护状态 #

首先，我们需要分别跟踪输入框的值和第二个输入框的错误状态：

import { useState } from 'react';

function YourComponent() {
  // 用数组存储两个输入框的值，索引0对应第一个，1对应第二个
  const [inputValues, setInputValues] = useState(['', '']);
  // 专门为第二个输入框维护错误信息状态
  const [secondInputError, setSecondInputError] = useState('');

2. 给第二个输入框单独加验证逻辑 #

在处理输入变化的函数里，只对第二个输入框（索引为1的那个）做重复内容检查：

const handleInputChange = (index, value) => {
    const updatedValues = [...inputValues];
    updatedValues[index] = value;
    setInputValues(updatedValues);

    // 只有当修改的是第二个输入框时，才触发重复验证
    if (index === 1) {
      if (value === inputValues[0]) {
        setSecondInputError('输入内容与第一个框重复，请重新输入');
      } else {
        setSecondInputError('');
      }
    }
  };

3. 只在第二个输入框下方渲染错误提示 #

最后，渲染输入框的时候，只把错误提示放在第二个输入框的下方：

return (
    <div>
      <div className="input-group">
        <input
          value={inputValues[0]}
          onChange={(e) => handleInputChange(0, e.target.value)}
          placeholder="第一个输入框"
        />
      </div>
      <div className="input-group">
        <input
          value={inputValues[1]}
          onChange={(e) => handleInputChange(1, e.target.value)}
          placeholder="第二个输入框"
        />
        {/* 这里只渲染第二个输入框的错误提示 */}
        {secondInputError && (
          <span className="error-message" style={{ color: 'red', fontSize: '12px' }}>
            {secondInputError}
          </span>
        )}
      </div>
    </div>
  );
}

export default YourComponent;

核心思路总结 #

这种方案的关键是将错误状态与特定输入框绑定，而不是用全局的错误状态。不管是固定两个输入框还是动态生成的，只要你指定要验证的输入框索引（比如这里的1），然后只在对应位置渲染错误提示，就能实现需求啦。

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