在 onClick 触发器之后创建反应组件的最佳方法是什么（好的做法？）？

Question

我刚开始自己学习Reactjs ，我遇到了一个问题。 我被卡住了，我想知道当我单击一个按钮时如何在DOM中创建一个新的<div> 。

在纯 JS 中，我在按钮上使用了addEventListener ，然后我add / remove css 样式以使用classList显示它（在此之前， <div>被隐藏）。 我认为这不是在 Reactjs 中实现它的最佳实践。

所以，我想知道如何做到这一点。

这是我的第一个组件。

const Welcome = () => {
    return (
        <div className="top">
          < Intro/>
          < InputUserName/>
          // Here, I need to build a new <div> only when I click on the following button (inside InputUserName)
        </div>
    )
};

这是我的第二个带有按钮的组件和 onCLick function。

const InputUserName = () => {
    const [username, setUsername] = useState('');
    return (
        <div className="usernameField">
            <div className="userField flex">
              <input
                type="text"
                name="username"
                className="userID"
                placeholder="Discogs' Username"
                value={username}
                autoComplete="off" autosuggest="off"
                onChange={(e) => setUsername(e.target.value)}>
                    {console.log(username)}
            </input>
                <span
                    className="usernameButton btn"
                    onClick={() => handleSubmitUserName(username)}>Send
                </span>
            </div>
        </div>
    )
};

最后，这是我点击发送按钮时调用的 function

const handleSubmitUserName = (username) => {
    // Username field is empty !
    if (username === '') { 
        document.querySelector('.userID').style.border = "2px solid red";
    }
    // Username is !empty.
    // I need to build the following stuff inside the first component (the Welcome one). 
        return (
            <div className="hi">
                <p className="first">Hi <span class="pseudo">${username}</span>.</p>
                <p className="second">Let me find your next listening.</p>
            </div>
        )
};

Answer 1

有几种方法可以做到这一点，但可能最简单的方法是将 state 成员添加到Welcome中，该成员表示是否有div ，并让Welcome根据该 state 成员有条件地呈现div 。 您有Welcome通过InputUserName和 function 来调用以更新 state 成员，并让InputUserName适当地调用 function。

Answer 2

这是您需要做的

const Welcome = () => {
  const [toggle, setToggle] = useState(false);
  const handleClick = () => setToggle((v) => !v);
  return (
    <div className="top">
      <button onClick={handleClick}>toggle the div</button>
      <Intro />
      <InputUserName />
      {toggle && <div>this would be visible when toggle is true</div>}
    </div>
  );
};

Answer 3

基本上，您希望将值从子组件传递到父组件。 这是一种方法。

当用户名从“InputUserName”组件提交时，我们想通知“Welcome”组件，所以我们将创建一个“onUsernameSubmitted”function。

const Welcome = () => {
   
   const [username, setUsername] = useState("");
   const [showMyDiv, setShowMyDiv] = useState(false);
   const handleUsernameSubmitted = (username) => {
      setUsername(username);
      setShowMyDiv(true);

   }

    return (
        <div className="top">
          < Intro/>
          < InputUserName onUsernameSubmitted={(username) => handleUsernameSubmitted} />
          {showMyDiv && <div>Your custom div will appear here</div>}
        </div>
    )
};

然后在这一行const InputUserName = (props) => {请注意，我刚刚添加了“props”参数。 然后在你的句柄 function 这个组件里面，调用props.onUsernameSubmitted(username)