Return React hooks 中按钮点击的字符串

Question

我正在尝试在 React 钩子中单击按钮时打印一个字符串。

这个名为 "More Info" 的按钮位于我创建的挂钩的 return 标记内。 (JSX) 单击它时，它会调用另一个名为 "ChangeName" 的函数组件，它应该打印一个字符串。

我不确定我是否写错了语法或遗漏了什么？函数内的 console.log 在日志中显示字符串，但 div 标签只是不在控制台上打印字符串，

创建了一个自定义挂钩，按钮位于其 return 标签内。

 <button onClick ={ChangeName}>More Info <button>

onclick 应该调用并打印以下函数的结果

 function ChangeName(){ 
         console.log("This is a test") //works
          return (<div>"This is a test"</div>)
          }

Answer 1

Tt 与 react hook 无关，如果你想在按钮上方打印字符串，你应该使用来自 react hooksuseState 的状态

const SomeComp = () => {
   const [value, setValue] = useState("")
   const changeName = () => {
      setValue("some value changed")
   }
   return (
     <>
     {value.length > 0 && <div>{value}</div>}
     <button onClick={changeName}>Change Name</button>
     </>
   )
}

Return React hooks 中按钮点击的字符串

Return a string on button click in React hooks

reactjs

react-hooks