Блог

Поэтому я пытаюсь добавлять поле ввода всякий раз, когда нажимаю кнопку. Это работает, но не имеет значения, какую кнопку я нажимаю, все контейнеры получают этот ввод, я хочу создать кнопку, которая работает на каждом контейнере. Может быть, мне нужно создать для этого другой компонент или есть решение, которое будет работать с моим «основным» компонентом без открытия другого? {Можно использовать только React и JS, я знаю, что в jquery есть способ} У меня есть 4 раздела ПРОДУКТА, поэтому я имел в виду, что кнопка будет запускать каждый из них отдельно в моем коде :

 function Products(props){
    function FunctionClick(){
        let myContainer = document.getElementsByClassName('container');
        for(let i=0;i<myContainer.length;i  ){
            let myInput=document.createElement('input');
            myContainer[i].appendChild(myInput)
        }
        
    };
    

    return(
    <div className='container' id='Container'>
    <span className='namestyle'>{props.name}</span>
    <span className='descriptionstyle'>{props.description}</span>
    <span className='descriptionstyle1'>{props.description1}</span>
    <img className='imgstyle' src={props.img}></img>
    <span className='pricestyle'>{props.price}</span>
    <span className='ratingstyle'>{props.rating}</span>
    <button onClick={FunctionClick} id='plusbut' className='plusbutton'> </button>


    </div>)

}

export default Products;  

Редактировать-
Извините, если вы не поняли, чего я пытаюсь достичь, я надеюсь, что это сделает его лучше-
Я пытаюсь заставить каждую кнопку управлять своим собственным div. Теперь, когда я нажимаю на одну кнопку, все подразделения получают поле ввода, и я хочу, чтобы кнопка запускала только тот div, на который я нажал.
Спасибо, ребята.

Попробуйте этот подход,

 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 amp;amp; (
        <div>
          <input type="text" />
        </div>
      )}
      <div>
        <button onClick={handleClick} id="plusbut" className="plusbutton">
           
        </button>
      </div>
    </div>
  );
};
  

Рабочий код — https://codesandbox.io/s/eloquent-goldwasser-yjxil?file=/src/App.js:0-1033

Пожалуйста, дайте мне знать, если ваш вариант использования отличается / или возникают какие-либо проблемы.

Проблема заключается в том, как вы запрашиваете элементы. При использовании document.getElementsByClassName вы запрашиваете весь DOM таким образом, учитывая несколько экземпляров, которые используют divs с одним и тем же классом — вы получите их все.

По сути, вы хотели бы получить компонент, который определяет область его действия. Что-то вроде этого должно выполнить работу:

 function Product(props){
    let renderInputField = false;
  
    function onClick(){
        renderInputField = true;
    };
    
      return(
      <div className='container'>
        { renderInputField ? '<input type="text" value={props.value} />' : ''}
        <span className='namestyle'>{props.name}</span>
        <span className='descriptionstyle'>{props.description}</span>
        <span className='descriptionstyle1'>{props.description1}</span>
        <img className='imgstyle' src={props.img}></img>
        <span className='pricestyle'>{props.price}</span>
        <span className='ratingstyle'>{props.rating}</span>
        <button onClick={onClick} id='plusbut' className='plusbutton'> </button>
      </div>
      )
}

export default Product;
  

Для этого можно использовать методы JavaScript createElement и appendChild.

 <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>