javascript 如何用React在点击时更改文本？

yruzcnhs 于 2023-03-28 发布在 Java

关注(0)|答案(5)|浏览(145)

这是我想让工作的代码。当我点击按钮时，一切都保持不变。
Console.log确实会改变。出了什么问题？谢谢

import React, {useState} from 'react';
import ExpenseDate from './ExpenseDate';
import Card from '../UI/Card';
import './ExpenseItem.css';

function ExpenseItem(props) {

const [title, setTitle]= useState(props.title);

const clickHandler=()=>{

    setTitle('Updated!');
    console.log(title);
};

    return (
    
    <Card className='expense-item'>
        
          <ExpenseDate date={props.date}></ExpenseDate>      
  
        <div className='expense-item__description'>
            <h2>{props.title}</h2>
            <div className='expense-item__price'>${props.amount}</div>
        </div>
        <button onClick={clickHandler}>Change title</button> 
    </Card>
    );
}

export default ExpenseItem;

JavaScript

来源：https://stackoverflow.com/questions/75854753/how-to-change-text-on-click-with-react

5条答案

按热度按时间

f1tvaqid1#

你在HTML中传递了props.title而不是title。即使你的状态值正在更新，你也没有使用这个值。相反，你使用的是组件props传递的初始值。

赞(0）回复(0）举报 2023-03-28

vwhgwdsa2#

虽然已经有了答案，但我想从更广泛的Angular ，在这里让事情更清楚一点。
假设你有一个ComponentA，它通过props为ComponentB提供了一个标题：

const ComponentA = () => {
    return <ComponentB title={"Test"} />
}

const ComponentB = (props) => {
    const [title, setTitle] = useState(props.title)
    return <h1>{props.title}</h1>
}

在这里，您实际上是告诉ComponentB从props.title获取其初始状态，但在组件的生命周期中，您正在更改title，但是在h1标记中，您仍然呈现props.title，而不是title，这是您状态中的标题。
要解决这个问题，你可以做两件事：在h1中渲染title而不是props.title，或者将状态提升到ComponentA，以便更清晰和严格地控制UI渲染的内容：

const ComponentA = () => {
    const [title, setTitle] = useState("some title")

    return (
        <ComponentB 
            title={title}
            setTitle={setTitle}
        />
    )
}

const ComponentB = ({title, setTitle}) => {

    return (
        <div>
            <h1>{title}</h1>
            <input value={title} onChange={e => setTitle(e.target.value)} />
        </div>
    )
}

在大多数情况下，减少变量的数量是一个很好的做法，只要它有助于简化代码，并且不会干扰应用程序中的其他内容。

赞(0）回复(0）举报 2023-03-28

stszievb3#

在你的代码中修改这个。正如前面指出的，你使用了错误的变量来打印数据。
<h2>{props.title}</h2>至<h2>{title}</h2>

赞(0）回复(0）举报 2023-03-28

mbjcgjjk4#

在react中，state和props之间的主要区别在于state是可变的，而props不是。所以如果你想更新值，你必须使用本地state而不是props。

赞(0）回复(0）举报 2023-03-28

efzxgjgh5#

看起来你正在渲染props而不是状态。而不是<h2>{props.title}</h2>，请使用<h2>{title}</h2>重试

赞(0）回复(0）举报 2023-03-28