如何获取按钮元素来更改 Reactjs 中的 h1 元素？

Question

我正在尝试制作 react 应用程序，其中我有一个按钮，该按钮会导致我的屏幕上的 h1 元素显示从 npm 包生成的笑话。我可以告诉 npm 包已成功安装（通过检查我的 console.log 元素），但我似乎无法获得更改现有 h1 的按钮。代码编译时我没有收到错误消息。

import React from 'react'

var oneLinerJoke = require('one-liner-joke');
var getRandomJoke = oneLinerJoke.getRandomJoke();
console.log(getRandomJoke)



function getJoke(){
  let h1 = document.querySelector('h1');
let changedH1 = document.getElementById('jokeline').innerHTML={getRandomJoke};
  return changedH1;
}

const Template = (props) => {
  return(
    <div>
<h1 id='jokeLine'>Click the button to read a joke</h1>
<button onclick= 'getJoke()'>Get ready to laff</button>

    </div>
   )

 }

export default Template

Answer 1

使用 React 状态保存笑话并将其显示到屏幕上。如果不是真的需要，不要直接操作 DOM。我已经更新了代码状态，您可以通过在最后运行来检查。

我在 React 的功能组件中使用了 react 钩子来使用状态功能。

import React, {useState} from 'react'
import oneLinerJoke from 'one-liner-joke';


const Template = (props) => {
 const [joke, setJoke] = useState(null);

 const getJoke = () => {
    setJoke(oneLinerJoke.getRandomJoke());
 }

  return(
    <div>
<h1 id='jokeLine'>{joke ? joke : 'Click the button to read a joke'}</h1>
<button onclick= 'getJoke()'>Get ready to laff</button>

    </div>
   )

 }

export default Template