Я нуждаюсь renderizar в компоненте называя это с другого, нажав на кнопку. В свою очередь, когда я звоню в компонент, я хочу послать ему свойство и смочь получать ее в другом компоненте. Я нахожусь в функциональном компоненте Home и хочу renderizar составляющий функциональный Editproduct.
import Editproduct from '../adminstock/Editproduct';
const Home = (props) =>{
function editTarget(event, index){
event.preventDefault();
console.log(products[index]);
return(<Editproduct productArray={products}/>);
}
return(
<div>
<Button
onClick={(event) => editTarget(event, index)}
entry = {index}>
<Edit color="primary" fontSize="small"/>
</Button>
</div>
);
}
В кнопке, которую я создал, я звоню в функцию editTarget и в этой функции я нуждаюсь в том, чтобы возвратить новый компонент, и который отображает Ваш render.
Я не понимаю точно, что то, что ты хочешь сделать, но этим deberГ - в renderizar один <Editproduct/>
, нажав botГіn.
//Importa useState
import React, {useState} from 'react';
import Editproduct from '../adminstock/Editproduct';
const Home = (props) =>{
//Utiliza el hook useState
const [buttonClicked, setButtonClicked] = useState(false);
handleButtonClick = () => {
setButtonClicked(true)
}
return(
<div>
<Button
onClick={() => handleButtonClick}
entry = {index}>
<Edit color="primary" fontSize="small"/>
</Button>
//Utiliza una condición ternaria para condicionar el render de la etiqueta.
//Si se presionó el botón buttonClicked === true y se renderiza.
//En caso contrario devuelve null y no renderiza nada.
{buttonClicked ? <Editproduct productArray={products}> : null}
</div>
);
}
, Если он ничего не делает, тестирует менять это:
onClick={() => handleButtonClick}
из-за:
onClick={handleButtonClick}