更改按钮单击时的文本值

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;