React实现简单留言板要有昵称加留言

下面是一个在React中实现简单留言板，并要求输入昵称和留言的示例代码：

首先，创建一个MessageBoard组件：

import React, { useState } from 'react';

const MessageBoard = () => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const [nickname, setNickname] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newEntry = {
      nickname: nickname,
      message: newMessage
    };
    setMessages([...messages, newEntry]);
    setNewMessage('');
  };

  return (
    <div>
      <h2>留言板</h2>
      <ul>
        {messages.map((entry, index) => (
          <li key={index}>
            <strong>{entry.nickname}</strong>: {entry.message}
          </li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="昵称"
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
        />
        <textarea
          placeholder="留言"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
        ></textarea>
        <button type="submit">添加留言</button>
      </form>
    </div>
  );
};

export default MessageBoard;

然后，在你的主组件中使用MessageBoard组件：

import React from 'react';
import MessageBoard from './MessageBoard';

const App = () => {
  return (
    <div>
      <h1>简单留言板</h1>
      <MessageBoard />
    </div>
  );
};

export default App;

这样，你就可以在App组件中渲染MessageBoard组件，用户需要输入昵称和留言，并且可以将昵称和留言显示在留言板上。

同样地，这只是一个简单的示例，没有使用任何数据持久化或复杂的状态管理。在实际的应用中，你可能需要使用更高级的状态管理库，如Redux或Mobx，以及与后端API交互来实现更完整的留言板功能。