更改按鈕單擊時的文本值

Question

我是 REACT JS 的新手，所以在制作應用程序時，我被困在這部分，我想在單擊按鈕時更改 h1 值

import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';

function App() {

return (
<Container>
    
<Row className="Row">
  <div className="frame">
 
    <h1>this text should change</h1>
       <Button className=" btn btn1" color="light">YES</Button> // this button should change the text
       <Button className=" btn btn2" color="light">NO</Button>
  </div>
</Row>

</Container>
);
}

export default App;

Answer 1

永遠不要訪問真實的 DOM。 使用狀態並將其呈現為 React 方式。

我通常會使用 state 來改變一些東西 - 請參閱Using the State Hook 。 然后渲染出來。 創建這個：

const [Text, setText] = useState("this text should change");

渲染它：

<h1>{Text}</h1>

使用事件處理程序並使用type="button"這樣它就不會刷新頁面：

  <Button
    className=" btn btn1"
    color="light"
    type="button"
    onClick={() => {
      setText("Praveen is awesome! You clicked on YES button!");
    }}
  >
    YES
  </Button>
  {/*// this button should change the text*/}
  <Button
    className=" btn btn2"
    color="light"
    type="button"
    onClick={() => {
      setText("Praveen is awesome! You clicked on NO button!");
    }}
  >
    NO
  </Button>

現在看看魔術： https://557w4.csb.app/

代碼：

import Button from "react-bootstrap/Button";
import "./App.css";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { useState } from "react";

function App() {
  const [Text, setText] = useState("this text should change");
  return (
    <Container>
      <Row className="Row">
        <div className="frame">
          <h1>{Text}</h1>
          <Button
            className=" btn btn1"
            color="light"
            type="button"
            onClick={() => {
              setText("Praveen is awesome! You clicked on YES button!");
            }}
          >
            YES
          </Button>
          {/*// this button should change the text*/}
          <Button
            className=" btn btn2"
            color="light"
            type="button"
            onClick={() => {
              setText("Praveen is awesome! You clicked on NO button!");
            }}
          >
            NO
          </Button>
        </div>
      </Row>
    </Container>
  );
}

export default App;

預習

完整代碼沙盒： https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js

Answer 2

在這種情況下，您必須使用鈎子state （文檔）。

所以，首先你必須導入 useState 鈎子，然后創建它並最后使用它。

因此，您的代碼將是這樣的：

import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { useState } from 'react';

function App() {

  const [text, setText] = useState("this text should change");

  return (
    <Container>
    
    <Row className="Row">
      <div className="frame">
 
      <h1>{text}</h1>
        <Button className=" btn btn1" color="light" onClick={e => setText("new text")}>YES</Button> // this button should change the text
        <Button className=" btn btn2" color="light">NO</Button>
     </div>
    </Row>

   </Container>
  );
}

export default App;