React useState：如何在不保留先前输入的情况下将名称重置为“朋友”

Question

我正在使用 useState 开发一个简单的 React 组件。它有一个显示“Hello {name}”的 h1 标签、一个用户可以输入姓名的输入字段，以及一个单击后将名称更改为“Friends”的按钮。

这是我当前在greetings.js 中的代码：

import React, { useState } from 'react';

function Greetings() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const changeToFriends = () => {
    setName('Friends');
  };

  return (
    <div>
      <h1>Hello {name || '...'}</h1>
      <input 
        type="text" 
        value={name} 
        onChange={handleChange} 
        placeholder="Enter your name" 
      />
      <button onClick={changeToFriends}>Change Name to Friends</button>
    </div>
  );
}

export default Greetings;

图片供参考

问题：如果我在输入字段中输入“hello”，h1 将显示“Hello hello”。那部分工作正常。当我单击该按钮时，它将“Friends”附加到当前输入，结果是“Hello hellofriends”。我希望它将名称替换为“Friends”，因此无论输入中的内容如何，输出都会变为“Hello Friends”。另外，如果我删除输入，h1 仍然显示“Hello hello”，而不是清除名称。我想要什么：单击该按钮后，名称应重置为“Friends”，而不保留之前的输入。当输入被清除时，我希望 h1 显示类似“Hello ...”的内容或为空，而不保留最后输入的值。关于如何解决这个问题有什么想法吗？

提前致谢！

我尝试过的：我尝试使用 setName 设置状态，以便在输入字段更改时更新名称，并在单击按钮时将其替换为“Friends”。输入字段正确地将 h1 更新为“Hello {name}”，但是当我单击按钮时，它将“Friends”附加到输入值而不是替换它。另外，我注意到当我清除输入时，h1 仍然显示“Hello {previous value}”而不是清除它。我的期望：当我单击按钮时，无论当前输入如何，h1 都应仅显示“Hello Friends”。当输入被清除时，我希望 h1 显示“Hello ...”或为空，而不保留最后输入的值。实际发生了什么：单击该按钮会将“Friends”附加到输入值，结果是“Hello hellofriends”。清除输入仍然显示“Hello {previous input}”，而不是清除显示。有什么建议可以解决这个问题吗？