Javascript 在react应用程序中键入一个字符后，输入字段失去焦点

在我的例子中，我有一个下拉列表，根据下拉列表中选择的数字，会出现一些输入字段。在输入字段中键入一个字符后，该输入字段上的焦点将丢失。 为每个字段设置唯一键并不能解决我的问题

链接到项目：

const ItemPrice=（）=>{
const data=itemData.doReservation.eventPackage.item；
设emptyCat={}；
让emptyQnt={}；
让promoNum={}；
设emptyPromotion={}；
常量[PromNumber，SetPromNumber]=使用状态（PromNum）；
for（让它输入数据）{
让cat={}；
让promo={}；
for（让bt输入数据[it].buyertypes）{
cat[data[it].buyertypes[bt].id]=“”；
emptyQnt[data[it].buyertypes[bt].id]=0；
促销单[data[it].buyertypes[bt].id]=“”；
PromNum[data[it].buyertypes[bt].id]=[]；
emptyPromotion[data[it].buyertypes[bt].id]={}；
}
emptyCat[data[it].id]=cat；
cat={}；
}
const[quantity，setQuantity]=使用状态（emptyQnt）；
const[code，setCode]=使用状态（emptyPromotion）；
常量句柄数量=（e）=>{
const name=e.target.name；
常量值=e.target.value；
设定量({
量
[名称]：值
});
设num=[]；
for（设i=1；i{
让buyerTypes=[]；
设项目=[]；
如果（数据）{
for（让它输入数据）{
推(
类型
量
价格类别
);
for（让bt输入数据[it].buyertypes）{
buyerTypes.push({
dsc:数据[it]。买方类型[bt]。说明，
qntId:数据[it].buyertypes[bt].id
});
}
推(
{buyerTypes.map（（i，索引）=>(
{i.dsc}
{[0,1,2,3,4,5,6].map（（l）=>{
返回(
{l}
);
})}
{promoNumber[i.qntId].map（（p，index）=>(
代码{p}：
))}
))}
);
买方类型=[]；
}
}
返回(
{items.map（（it，index）=>{
返回{it}；
})}
);
};
常量handleSubmit=（e）=>{
e、 预防默认值（）；
};
返回(
);
};

您必须分别解耦父（

ItemPrice

）和子（

ShowData

）组件

您的代码需要一个完整的系数。因为像

const data

这样的依赖项在

ItemPrise

中定义，并在子组件

ShowData

中使用，而应该作为

Props

发送到

ShowData

组件

ShowData

组件不应直接依赖于

ItemPrise

组件中定义的任何变量/常量。应根据您的用例和应用程序要求，使用以下任一基础传递所有此类依赖关系：

Props

Context

全局状态管理，如

Redux

定制挂钩

---

您必须分别解耦父（

ItemPrice

）和子（

ShowData

）组件

您的代码需要一个完整的系数。因为像

const data

这样的依赖项在

ItemPrise

中定义，并在子组件

ShowData

中使用，而应该作为

Props

发送到

ShowData

组件

ShowData

组件不应直接依赖于

ItemPrise

组件中定义的任何变量/常量。应根据您的用例和应用程序要求，使用以下任一基础传递所有此类依赖关系：

Props

Context

全局状态管理，如

Redux

定制挂钩

---

你失去了焦点，因为每次重新定义组件

ShowData

，你都应该将其代码提取到一个单独的组件到一个外部作用域。换句话说，在每次渲染时，你都重新装载

ShowData

太棒了，我提取了

ShowData

的代码，我工作你失去了焦点，因为每次重新定义的更改组件

ShowData

，您应该将其代码提取到外部作用域的单独组件中。换句话说，在每次渲染时，您都重新装载

ShowData

Awesome，我提取了

ShowData

的代码，我可以工作

const ItemPrice = () => {
  const data = itemData.doReservation.eventPackage.item;

  let emptyCat = {};
  let emptyQnt = {};
  let promoNum = {};
  let emptyPromotion = {};

  const [promoNumber, setPromoNumber] = useState(promoNum);

  for (let it in data) {
    let cat = {};
    let promo = {};

    for (let bt in data[it].buyertypes) {
      cat[data[it].buyertypes[bt].id] = "";
      emptyQnt[data[it].buyertypes[bt].id] = 0;
      promo[data[it].buyertypes[bt].id] = "";
      promoNum[data[it].buyertypes[bt].id] = [];
      emptyPromotion[data[it].buyertypes[bt].id] = {};
    }
    emptyCat[data[it].id] = cat;
    cat = {};
  }

  const [quantity, setQuantity] = useState(emptyQnt);
  const [code, setCode] = useState(emptyPromotion);

  const handleQuantity = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setQuantity({
      ...quantity,
      [name]: value
    });
    let num = [];
    for (let i = 1; i <= value; i++) {
      num.push(i);
    }
    setPromoNumber({ ...promoNumber, [name]: num });
    let num2 = {};
    for (let pn = 1; pn <= value; pn++) {
      if (code[name]["code" + name + pn] === undefined) {
        num2["code" + name + pn] = "";
      } else {
        num2["code" + name + pn] = code[name]["code" + name + pn];
      }
    }
    setCode({ ...code, [name]: num2 });
  };

  const handleCode = (e) => {
    e.preventDefault();
    const sp = e.target.name.split(",");
    const id1 = sp[0];
    const id2 = sp[1];
    const value = e.target.value;
    setCode({
      ...code,
      [id1]: {
        ...code[id1],
        [id2]: value
      }
    });
  };

  const ShowData = () => {
    let buyerTypes = [];
    let items = [];
    if (data) {
      for (let it in data) {
        items.push(
          <div className="selectionHeader">
            <div className="selHeadType">type</div>
            <div className="selHeadQnt">Quantity</div>
            <div className="selHeadCat">Price category</div>
          </div>
        );
        for (let bt in data[it].buyertypes) {
          buyerTypes.push({
            dsc: data[it].buyertypes[bt].description,
            qntId: data[it].buyertypes[bt].id
          });
        }
        items.push(
          <div>
            {buyerTypes.map((i, index) => (
              <div key={`a${index}`} className="selectionRowComp">
                <div key={`c${index}`} className="selectionRow">
                  <h4 className="btDescription">{i.dsc}</h4>
                  <div className="NumberDropDown">
                    <select
                      value={quantity[i.qntId]}
                      onChange={handleQuantity}
                      name={i.qntId}
                    >
                      {[0, 1, 2, 3, 4, 5, 6].map((l) => {
                        return (
                          <option value={l} key={l}>
                            {l}
                          </option>
                        );
                      })}
                    </select>
                  </div>
                </div>
                <div>
                  {promoNumber[i.qntId].map((p, index) => (
                    <div key={`s${index}`}>
                      <label className="codeLabel">code {p}: </label>
                      <input
                        className="codeInput"
                        type="text"
                        value={code[i.qntId]["code" + i.qntId + (index + 1)]}
                        onChange={handleCode}
                        name={[i.qntId, "code" + i.qntId + (index + 1)]}
                        // required={hasPromotion[i.qntId]}
                      />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        );
        buyerTypes = [];
      }
    }
    return (
      <div className="selectionItem">
        {items.map((it, index) => {
          return <div key={`w${index}`}> {it}</div>;
        })}
      </div>
    );
  };

  const handleSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <div>
      <div>
        <div>
          <form onSubmit={handleSubmit}>
            <ShowData />
          </form>
        </div>
      </div>
    </div>
  );
};