React新手练习：数字/字符串转符号 输出长度不匹配问题求助

问题原因 #

你的现有逻辑仅判断了整个输入值的类型，没有遍历输入的每一个字符做对应转换，所以不管输入多长的内容，最终都只会输出单个?d，自然和输入长度不匹配。

调整后完整代码 #

import React from 'react';
import { useState } from 'react';

export default function Accueil() {
    //submit
    const ConvertResult = e => {
        e.preventDefault();
    }

    //input 初始化空字符串避免undefined
    const [InputState, setInputState] = useState('');

    const InputContain = e => {
        setInputState(e);
    }
    //button 初始化空字符串避免undefined
    const [ConvertInput, setConvertInput] = useState('');

    const ConvertData = () => {
        if (!InputState) {
            setConvertInput('')
            return
        }
        let res = ''
        // 逐字符遍历判断类型生成对应标记
        for (const char of InputState) {
            // 数字判断逻辑，可根据你的规则调整
            if (!isNaN(Number(char)) && char.trim() !== '') {
                // 替换为你需要的数字对应转换格式
                res += '<?N>'
            } else {
                // 字符串字符转换为<?L>格式
                res += '<?L>'
            }
        }
        setConvertInput(res)
    }


    return (
        <div className="Accueil_Container">
            <div className="Accueil_main">
                <form onSubmit={e => ConvertResult(e)}>
                    <input type="text"
                    value={InputState}
                    onInput={e => InputContain(e.target.value)}/> <br/>
                    {/* 添加type="button"避免默认form提交 */}
                    <button type="button" onClick={ConvertData}>Convert</button>
                </form>
            </div>
            <span>
                {ConvertInput}
            </span>
        </div>
    )
}

核心调整点 #

• 新增逐字符遍历逻辑：每个字符单独判断类型，对应生成转换标记后拼接，最终输出长度和输入长度完全匹配
• 补充数字类型判断分支，你可以根据自己的规则替换数字对应的转换格式
• 给useState添加初始空字符串，避免初始化阶段的undefined异常
• 给转换按钮添加type="button"属性，避免form默认提交行为带来的异常
• input补充value绑定，变成受控组件，避免输入状态不同步的问题

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