reactjs中如何使用按钮保存对象

Posted 2023-02-16

【中文标题】reactjs中如何使用按钮保存对象

【英文标题】：how to save an object using a button in reactjs

【发布时间】：2021-11-19 19:42:39

【问题描述】：

目前，我有一个使用 react js 的 WebSocket 聊天消息器，我想让它在我单击其关联按钮时保存消息对象，以便将其固定。如何按下按钮来保存与之关联的对象？

目前，我有一个对象数组，它们像这样堆叠在一起：

messages.map(message => (
        <>
           <tr>
              <td>message.message</td>
              <td><button id="pin_button" type="button" >Pin Message</button></td>
           </tr>
        </>
))

我想要做的是当我按下该按钮时拥有它，它将保存该对象并最好将其发送到 WebSocket，以便其他人可以看到被固定的消息

【参考方案1】：

你应该使用状态。

const [savedMsgs, setSavedMsgs] = useState([]);

<ul className="saved-msgs">
  savedMsgs.map((msg,i) => <li key=i>msg.message</li>)
</ul>

<tr>
  <td>message.message</td>
  <td>
    <button
      id="pin_button"
      onClick=() => setSavedMsgs([...new Set([...savedMsgs, message])])
    >
      Pin Message
    </button>
  </td>
</tr>