Как изменить текст <p>с помощью кнопки в React. js? - PullRequest
Новая
       2

Как изменить текст <p>с помощью кнопки в React. js?

1 голос
/ 31 марта 2020

Для развлечения и практики я делаю простой генератор случайных оскорблений. Я планирую разделить свои элементы на компоненты и dry код. Я пытаюсь создать event handler, который обновит текст моего элемента <p> новым случайным словом. Я попытался добавить функцию внутри компонента App, и console.log из 'button clicked' прошло успешно. Как мне взять <p className="randomInsultText"> и отобразить там случайный текст? 

import React from "react";
import "./App.css";
import image from "./callthema.png";
import words from "./data";


function App() {
  return (
    <div className="App">
      <>
        <img src={image} alt="meme" width="50%" />
        <h2>Call em' a</h2>

        <p className="randomInsultText">
          {words[0].setOne[Math.floor(Math.random() * words[0].setOne.length)] +
            " " +
            words[1].setTwo[Math.floor(Math.random() * words[1].setTwo.length)]}
        </p>
     <button>New Word</button>
      </>
    </div>
  );
}

export default App;

Вот сокращенная версия слов из моих данных. js file: 

export default [
  {
    setOne: ["Lazy", "Smelly", "Egg Headed", "Terrible"]
  },
  {
    setTwo: ["Goblin", "Dingbat", "Lunkhead", "Snowflake"]
  }
];

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Вы можете использовать так называемые крючки . 

import React, { useState } from "react"
import "./App.css"
import image from "./callthema.png"
import words from "./data"

const App = () => {
  const [insult, setInsult] = useState(
    words[0].setOne[Math.floor(Math.random() * words[0].setOne.length)] +
      " " +
      words[1].setTwo[Math.floor(Math.random() * words[1].setTwo.length)]
  )

  const randomizeInsult = () => {
    setInsult(
      words[0].setOne[Math.floor(Math.random() * words[0].setOne.length)] +
        " " +
        words[1].setTwo[Math.floor(Math.random() * words[1].setTwo.length)]
    )
  }
  return (
    <div className="App">
      <>
        <img src={image} alt="meme" width="50%" />
        <h2>Call em' a</h2>

        <p className="randomInsultText">{insult}</p>
        <button onClick={() => randomizeInsult()}>New Word</button>
      </>
    </div>
  )
}

export default App
0 голосов
/ 31 марта 2020

Вы должны использовать state для обновления значения в приложении react. React functional component имеет удивительный hook, называемый useState . Вы можете попробовать это. 

const [word, setWord] = useState(words[0].setOne[Math.floor(Math.random() * words[0].setOne.length)] + " " + words[1].setTwo[Math.floor(Math.random() * words[1].setTwo.length)]);


<p className="randomInsultText">{word}</p>
<button onClick={setWord(words[0].setOne[Math.floor(Math.random() * words[0].setOne.length)] + " " + words[1].setTwo[Math.floor(Math.random() * words[1].setTwo.length)])}>New Word</button>
...