在React-Konva中模拟可编辑输入并读取{rows}x{cols}格式值

下面提供两种可行方案，适配你的React看板需求：

方案一：原生DOM Input实现（简单高效） #

这是最直接的实现方式，替换原有模拟输入为真实可编辑的输入框，结合React状态管理输入值并解析格式：

1. 添加状态管理输入值和格式校验错误

import { useState } from 'react';

// 在组件内部添加状态
const [inputValue, setInputValue] = useState("10x2"); // 保留原硬编码初始值
const [formatError, setFormatError] = useState("");

2. 编写格式解析函数，校验并提取行列数

// 解析{rows}x{cols}格式的字符串
const parseDimensions = (value) => {
  const validPattern = /^(\d+)x(\d+)$/;
  const matchResult = value.match(validPattern);
  
  if (!matchResult) {
    setFormatError("请输入正确格式：数字x数字，例如10x2");
    return null;
  }
  
  setFormatError("");
  return {
    rows: parseInt(matchResult[1], 10),
    cols: parseInt(matchResult[2], 10)
  };
};

3. 修改JSX，替换模拟输入为真实Input，并绑定事件

// 替换原模拟输入区域的代码
<div style={{ margin: '10px 0' }}>
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    placeholder="输入rowsxcols格式，如10x2"
    style={{ padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
  />
  {/* 原红色Text按钮修改为触发生成容器的逻辑 */}
  <Text 
    onClick={() => {
      const dimensions = parseDimensions(inputValue);
      if (dimensions) {
        // 这里添加生成CustomCardContainer的逻辑，比如更新看板容器列表
        // 示例：setBoardContainers(prev => [...prev, dimensions])
        console.log('生成容器：', dimensions.rows, '行', dimensions.cols, '列');
      }
    }}
    style={{ color: 'red', cursor: 'pointer', marginLeft: '10px' }}
  >
    插入分区容器
  </Text>
  {/* 显示格式错误提示 */}
  {formatError && <p style={{ color: 'red', margin: '5px 0 0 0' }}>{formatError}</p>}
</div>

方案二：Canvas文本输入方案（无DOM Input场景） #

如果需要完全基于Canvas实现输入，可通过Canvas点击触发输入弹窗，或结合键盘事件处理输入（以下为简化版实现）：

1. 添加Canvas相关状态和处理函数

const [canvasInput, setCanvasInput] = useState("10x2");

const handleCanvasInput = () => {
  const userInput = prompt("请输入rowsxcols格式（如10x2）：", canvasInput);
  if (userInput) {
    setCanvasInput(userInput);
    const dimensions = parseDimensions(userInput);
    if (dimensions) {
      // 执行生成CustomCardContainer的逻辑
    }
  }
};

2. 渲染Canvas作为输入入口

<canvas
  onClick={handleCanvasInput}
  width={220}
  height={40}
  style={{ border: '1px solid #ddd', borderRadius: '4px', cursor: 'text' }}
  ref={(canvasEl) => {
    if (!canvasEl) return;
    const ctx = canvasEl.getContext('2d');
    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
    ctx.font = '14px Arial';
    ctx.fillStyle = '#333';
    ctx.fillText(canvasInput || '点击输入rowsxcols', 10, 25);
  }}
/>

最终整合 #

将原代码第86行的硬编码let inputValue = "10x2";替换为状态中解析后的dimensions.rows和dimensions.cols，传递给CustomCardContainer的props，即可实现动态生成对应行列数的分区看板。

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