Вопросы Теги

Как я могу посылать в renderizar компонент с другого, нажав на кнопку в react js?

Я нуждаюсь 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.

1
задан 23.12.2019, 12:53
1 ответ

Я не понимаю точно, что то, что ты хочешь сделать, но этим 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}
0
ответ дан 23.12.2019, 22:06

Теги

Похожие вопросы