Reactjs React JS：动态替换输入中的字符串（实时）

用户可以在我的输入中以18/11/2020[最多10个字符]的形式写入数据。 我想，任何写的东西都可以通过我的方法或规则直接动态地进行消毒。 例如：

用户类型0=>00/00/0000直接显示在标签中

为此，我有一个空字符串作为默认值，但用想要的内容替换字符串无效（未显示任何更改）。有什么想法吗

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState("");

  const handleInput = (date) => {
    const inputValue = date.target.value;
    setState(date.target.value);
    const base = new Date(inputValue);
    
    const dateFormatUsEnglish = new Intl.DateTimeFormat("en-US");
    const dateFormatGerman = new Intl.DateTimeFormat("de-DE");
    const dateParts = dateFormatUsEnglish.formatToParts(base);
 

    const mapped = dateParts.reduce((accumulator, currentValue) => {
      accumulator[currentValue.type] = currentValue.value;
      return accumulator;
    }, {});


    if(inputValue === "0"){ 
   //here should be the method replacing the string with the new one
    }
    if(mapped.month > 12) {
      dateParts[0].value = 12; //set max for month
    }
 
    if(mapped.day > 31) {
      dateParts[2].value = 31; //set max for days
    }
     
    if(mapped.year > 2100) {
      dateParts[4].value = 2100; //set max for year
    }
    if((mapped.year % 2) === 0){

    } //leapyear

    console.log(dateParts); //sliced parts

    console.log(inputValue); //user input
    console.log(base); //dto
    console.log(mapped.month);
    console.log(mapped.day);
    console.log(mapped.year);
  };

  return (
    <div className="App">
      <input onChange={handleInput} defaultValue={state} maxLength="10" />
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
常量[状态，设置状态]=使用状态（“”）；
常量handleInput=（日期）=>{
const inputValue=date.target.value；
设置状态（日期、目标值）；
const base=新日期（inputValue）；
const dateFormatUsEnglish=新的国际日期时间格式（“en-US”）；
const dateFormatGerman=新的Intl.DateTimeFormat（“de”）；
const dateParts=dateFormatUsEnglish.formatToParts（基本）；
const mapped=dateParts.reduce（（累加器，currentValue）=>{
累加器[currentValue.type]=currentValue.value；
回流蓄能器；
}, {});
如果（inputValue==“0”）{
//这里应该是用新字符串替换字符串的方法
}
如果（映射月份>12）{
dateParts[0]。值=12；//设置月份的最大值
}
如果（映射日期>31）{
dateParts[2]。值=31；//设置天数的最大值
}
如果（映射年份>2100）{
dateParts[4]。值=2100；//设置年份的最大值
}
如果（（映射年份%2）==0）{
}//闰年
console.log（dateParts）；//切片部分
console.log（inputValue）；//用户输入
console.log（基本）；//dto
console.log（映射的月份）；
console.log（映射的.day）；
console.log（映射的.year）；
};
返回(
);
}

在formattedDate状态变量中，将指定必要的日期格式，并将其用作输入值

const[state，setState]=useState（“”）；
const[formattedDate，setFormatted]=useState（“”）
常量handleInput=（日期）=>{
//你的格式化逻辑在这里
setFormatted（`${formatted.month}/${formatted.day}/${formatted.year}`）
};
返回(
);将必要的转换日期格式指定给状态变量，并将其作为输入标记的值提供给您的输入标记。您可以给我一个示例吗？警告：应用程序包含一个类型为未定义的输入，带有value和defaultValue props。输入元素必须受控或不受控（指定值属性或defaultValue属性，但不能同时指定两者）。决定使用受控或非受控输入元素，并移除其中一个道具。更多信息：在应用程序（）的div输入处，您是否在输入标记中提供了type=“text”？