单击按钮时如何显示 div

Question

我只想知道，如何在单击按钮时显示 HTML 正文中的任何内容。在 php

中有类似 echo 的东西吗

这是我的 appTodo.js 代码....

import React, { useState } from 'react'

export default function AddTodo() {
    
    const [input, setInput] = useState("");
    
    const onChange = (e) => {
        setInput(e.target.value)
    }

    const handleOnClick = () => {
        console.log(input)
        setInput("")
    }

    return (
        <div className='container my-3 col-6'>
            <form>
                <input className="form-control" onChange={onChange} type="text" placeholder="What to do?" value={input} />
                <button id='addbtn' onClick={handleOnClick} type="button" className="btn btn-dark my-3">Add</button>
            </form>
        </div>
    )
}

Answer 1

只需要创建一个变量来保持状态的可见性div。

import React, { useState } from 'react'

export default function AddTodo() {
const [input, setInput] = useState("");
const [divVisibility, setDivVisibility] = useState(false);



const onChange = (e) => {
    setInput(e.target.value)
}

const handleOnClick = () => {
    setInput("")
    setDivVisibility(true)
}

return (
    <div className='container my-3 col-6'>
        <form>
            <input className="form-control" onChange={onChange} type="text" placeholder="What to do?" value={input} />
            <button id='addbtn' onClick={handleOnClick} type="button" className="btn btn-dark my-3">Add</button>
        </form>
        
    {divVisibility && 
      <div>
        Your content
      </div>
    }
    </div>


)
}

Answer 2

此代码创建了一个状态，可以通过单击按钮在 true 和 false 之间切换。当 false "componenet" = null，当 true "component" = (your component).

const [visible, setVisible] = useState(false);

function makeVisible() {
  if(visible === false){
    setVisible(true)
  } else setVisible(false);
}

const component = visible == true ? <h1>SHOWN</h1> : null;
const buttonString = visible == true? "UnShow" : "Show"

  return (
    <div className="App">
      <h1>Hello World!</h1>
      {component}
      <button onClick={makeVisible} >{buttonString}</button>
    </div>
  );
}

单击按钮时如何显示 div

How to show a div when a button is clicked

javascript

reactjs

react-hooks