Скрытие элементов в React

#javascript #reactjs

Вопрос:

Итак, в основном я хочу скрыть кнопку, когда я нажимаю на нее.

 const Button=()=>{
const [hideButton, setHideButton]= React.useState(false)
function Button(){
 setHideButton(false)
}
return(
<div>

<button onClick={setHideButton}> </button>
</div>
)
}

Ответ №1:

Изначально сделайте так true , чтобы отображалась кнопка. скрыть его на основе щелчка.

 const Button=()=>{
const [hideButton, setHideButton]= React.useState(true)
function handleClick(){
  setHideButton(false)
}
return(
 <div>
   {hideButton amp;amp; <button onClick={handleClick}>Click</button>}
 </div>
)}

Или просто поместите!(Нет) перед hideButton -> !hideButton и сделайте его истинным при нажатии кнопки.

 const Button=()=>{
const [hideButton, setHideButton]= React.useState(false)
function handleClick(){
  setHideButton(true)
}
return(
 <div>
   {!hideButton amp;amp; <button onClick={handleClick}>Click</button>}
   <ChildComponent hideButton={hideButton} handleClick={handleClick}/>
 </div>
)}

function ChildComponent ({hideButton, handleClick}) {
  return (
   <>
    <button onClick={handleClick}>Child Button</button>
    {!hideButton amp;amp; <p>
     This is content/paragraph which will be hidden 
     based on based on button click from parent component.
    </p>}
   </> 
  )
}

Вы можете изменить в соответствии с вашим требованием, я передал функцию и переменную состояния дочернему компоненту. дочерняя кнопка переключит содержимое дочернего компонента, а родительская кнопка скроется после нажатия.

1. Еще один вопрос. Как мне передать эту функцию другому компоненту, например, когда я нажимаю на кнопку, она скрывает кнопку, но также скрывает что-то еще в другом компоненте, например, значок

2. @tekila12 Я изменил 2-й пример кода, который вы можете проверить и изменить в соответствии с вашей целью. Если ответ полезен для вас, пожалуйста, проголосуйте / примите его. Спасибо.

3. Я ценю вашу помощь

4. существует проблема, из-за которой он дважды отображает значок, но nvm я как-нибудь с этим разберусь. «Дочерний компонент отображается где-то в другом месте, поэтому double отображает его. Спасибо

Ответ №2:

Просто условно отобразите кнопку, чтобы она не отображалась, если hideButton значение true:

 return(
  <div>
    {!hideButton amp;amp; <button onClick={setHideButton}> </button>}
  </div>
  )

1. Еще один вопрос. Как бы я передал эту функцию другому компоненту, например, когда я нажимаю на кнопку, она скрывает кнопку, но также скрывает что-то еще в другом компоненте, например, значок.

2. Вы могли бы сделать это точно так же, за исключением того, что вам нужно будет передать hideButton или hideIcon в качестве реквизита дочернему элементу

Ответ №3:

Для этого необходимо использовать React hook .

 const Button=()=>{
const [hideButton, setHideButton]= React.useState(false)
function hide(){
 setHideButton(false)
}
return(
<div>

{!hideButton amp;amp; <button onClick={hide}> </button>}
</div>
)
}

Ответ №4:

Здесь происходит несколько ошибок.

Именно так должен выглядеть ваш код (один из многих способов)

 const Button = () => {
    const [hideButton, setHideButton] = React.useState(false)
    function handleHideButton() {
        setHideButton(true)
    }
    return (
        <div>
            {!hideButton ? <button onClick={handleHideButton}>Hide</button> : null}
        </div>
    )
}

Что вы делали неправильно:

 const Button=()=>{
const [hideButton, setHideButton]= React.useState(false)
// You're creating this function called Button, but should be called something esle like handleHideButton
function Button(){
 // You should be setting this to true when the button is clicked.
 setHideButton(false)
}
return(
<div>
// here you should be calling the handleHideButton function defined above. Calling setHideButton isn't a good option here. 
<button onClick={setHideButton}> </button>
</div>
)
}