inputTextArea带序号

ts文件

 <Form form={form}>
        <Form.Item
                name="userNicks"
                label="账号"
                rules={[
                  {
                    required: true,
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      const userNicks = getFieldValue('userNicks');
                      if (!value || userNicks.length <= 100) {
                        return Promise.resolve();
                      }
                      return Promise.reject(new Error('一次查询最多支持100个账号'));
                    },
                  }),
                ]}
              >
             <AreaForm />
        </Form.Item>
</Form>
         

   
export interface IAreaFormProps {
  onChange?: (list?: string[]) => void;
}

const AreaForm = (props) => {
  const { onChange } = props;
  const [areaValue, setAreaValue] = useState<string>();
  const [lineNumbers, setLineNumbers] = useState<string[]>([]);

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = event.currentTarget.value;
    const numberList = value ? value.split('\n') : [];
    onChange && onChange(numberList);
    setLineNumbers(numberList);
    setAreaValue(value);
  };

  const handleScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
    const { scrollTop } = event.currentTarget;
    const lineNumberColumn = document.querySelector('.line-number-column');
    if (lineNumberColumn) {
      lineNumberColumn.scrollTop = scrollTop;
    }
  };

  return (
    <div className="group-analysis-textarea-container">
      <ol className="line-number-column">
        {lineNumbers.map((_, index) => ( <li key={index}>{index + 1}.</li>))}
      </ol>
      <Input.TextArea
        spellCheck="false"
        className="content-textarea"
        rows={lineNumbers.length || 1}
        value={areaValue}
        onChange={e => handleChange(e)}
        onScroll={handleScroll}
      />
    </div>
  );
};

AreaForm.defaultProps = {
  onChange: () => null,
};

export default AreaForm;

样式文件

.group-analysis-textarea-container {
  display: flex;
  border: 1px solid #ccc;
  height: 200px;

  ol {
    list-style-type: none;
  }

  ol::-webkit-scrollbar {
    width: 0;
  }

  .line-number-column {
    /* 设置序号列的固定宽度 */
    background-color: #fff;
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    margin-bottom: 0;
  }

  .line-number-column>li {
    text-align: left;
    color: #41465f;
  }

  .content-textarea {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 5px;
    resize: none;
  }
}