Javascript 通过单击按钮创建输入字段

因此，每当我单击按钮时，我都会尝试添加一个输入字段。 它可以工作，但我按下哪个按钮并不重要，所有容器都可以得到这个输入，我想在每个容器上做一个按钮。 也许我需要为此创建另一个组件，或者有一个解决方案可以在不打开另一个组件的情况下在我的“主”组件上工作？ {只能使用React和JS，我知道jquery中有一种方法} 我得到了4个div的产品，所以我的意思是按钮将分别触发每个div 我的代码：

功能产品（道具）{
函数函数单击（）{
让myContainer=document.getElementsByClassName（'container'）；
对于（设i=0；i），可以使用createElement和appendChild JavaScript方法来实现这一点

<div id="dynamicCheck">
<input type="button" value="Create Element" onclick="createNewElement();"/>
</div>

<div id="newElementId">New inputbox goes here:</div>


新的输入框如下所示：

Javascript部分：

<script type="text/JavaScript">
function createNewElement() {
// First create a DIV element.
var txtNewInputBox = document.createElement('div');

// Then add the content (a new input box) of the element.
txtNewInputBox.innerHTML = "<input type='text' id='newInputBox'>";

// Finally put it where it is supposed to appear.
document.getElementById("newElementId").appendChild(txtNewInputBox);
}
</script>


函数createNewElement（）{
//首先创建一个DIV元素。
var txtNewInputBox=document.createElement（'div'）；
//然后添加元素的内容（一个新的输入框）。
txtNewInputBox.innerHTML=“”；
//最后把它放在应该出现的地方。
document.getElementById（“newElementId”）.appendChild（txtNewInputBox）；
}
问题在于查询元素的方式。
当使用
document.getElementsByClassName
时，如果有几个实例使用同一个类中的div，那么您将查询整个DOM—您将获取它们

基本上，您希望实现的是一个确定其操作范围的组件。
像这样的东西应该能起作用：

功能产品（道具）{
设renderInputField=false；
函数onClick（）{
renderInputField=true；
};
返回(
{renderInputField？''：'}
{props.name}
{props.description}
{props.description1}
{props.price}
{props.rating}
+
)
}
导出默认产品；
试试这种方法

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

const products = [
  { id: 1001, name: "Product-1" },
  { id: 1002, name: "Product-2" },
  { id: 1001, name: "Product-3" },
  { id: 1002, name: "Product-4" },
  { id: 1001, name: "Product-5" }
];

export default function App() {
  return (
    <div className="App">
      <h1>Product Demo</h1>
      <Products data={products} />
    </div>
  );
}

const Products = ({ data }) => {
  return (
    <div>
      {data.map((v) => (
        <Product {...v} />
      ))}
    </div>
  );
};

const Product = ({ id, name }) => {
  const [showInput, setVisibility] = useState(false);
  const handleClick = () => {
    setVisibility(!showInput);
  };

  return (
    <div className="container" id="Container">
      Product Name : {name}
      {showInput && (
        <div>
          <input type="text" />
        </div>
      )}
      <div>
        <button onClick={handleClick} id="plusbut" className="plusbutton">
          +
        </button>
      </div>
    </div>
  );
};

import React，{useState}来自“React”；
导入“/styles.css”；
常数乘积=[
{id:1001，名称：“Product-1”}，
{id:1002，名称：“Product-2”}，
{id:1001，名称：“Product-3”}，
{id:1002，名称：“Product-4”}，
{id:1001，名称：“Product-5”}
];
导出默认函数App（）{
返回(
产品演示
);
}
常量乘积=（{data}）=>{
返回(
{data.map（（v）=>(
))}
);
};
常量乘积=（{id，name}）=>{
const[showInput，setVisibility]=useState（false）；
常量handleClick=（）=>{
setVisibility（！showInput）；
};
返回(
产品名称：{Name}
{showInput&&(
)}
+
);
};

工作守则-

请让我知道您的用例是否不同/或面临任何问题。
您是否愿意详细说明您试图实现的目标？我很难从您的问题中弄清楚。对不起，我尝试让每个按钮操作自己的div。现在，当我单击一个按钮时，所有div都会进入输入字段，我希望该按钮只触发我单击的div。但最终会发生什么？每次单击都会发生什么？调用新div？获取输入值？聚合值？是的，我的应用程序组件上有4个div的产品。很抱歉，我现在将编辑误解。我似乎不明白你在尝试做什么，但我可以告诉你当你使用react时，你真的不想直接操作DOM。相反，Render react组件这感觉有点不安全。不用说，语法是错误的，不过还是要谢谢你！我不是linter；）进行相关的修复，但重点是您需要一个条件作用域代码注入逻辑无法找出这里的错误。它看起来很好，但它仍然在对我尖叫O_O谢谢你Aviad。@Oded我修复了上面的示例，请重试：）仍然是相同的Aviad，它的函数似乎onClick不起作用。很好，我的朋友谢谢你抽出时间来。这个代码我不懂