[英]Change text value on button click
I am new in REACT JS so while making an app I am stuck at this part where i want to change h1 value when the button is clicked我是 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;
Never access the real DOM.永远不要访问真实的 DOM。 Use states and render it the React way.
使用状态并将其呈现为 React 方式。
I would generally use a state to change something - refer Using the State Hook .我通常会使用 state 来改变一些东西 - 请参阅Using the State Hook 。 And then render it out.
然后渲染出来。 Create this:
创建这个:
const [Text, setText] = useState("this text should change");
Render it:渲染它:
<h1>{Text}</h1>
Use the event handler and use a type="button"
so that it doesn't refresh the page:使用事件处理程序并使用
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>
Now see the magic: https://557w4.csb.app/现在看看魔术: https://557w4.csb.app/
Code:代码:
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;
Preview预习
Full CodeSandBox: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js完整代码沙盒: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js
In this case, you have to use the hook state
( Documentation ).在这种情况下,您必须使用钩子
state
(文档)。
So, first of all you have to import the useState hook, then create it and finally use it.所以,首先你必须导入 useState 钩子,然后创建它并最后使用它。
So, your code will be something like that:因此,您的代码将是这样的:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.