react简易留言板

以下是一个React简易留言板的示例代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MessageBoard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
      input: ''
    };
  }

  handleInputChange = (event) => {
    this.setState({ input: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const messages = [...this.state.messages, this.state.input];
    this.setState({ messages, input: '' });
  }

  render() {
    return (
      <div>
        <h1>留言板</h1>
        <form onSubmit={this.handleSubmit}>
          <input type="text" value={this.state.input} onChange={this.handleInputChange} />
          <button type="submit">添加留言</button>
        </form>
        <ul>
          {this.state.messages.map((message, index) => (
            <li key={index}>{message}</li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<MessageBoard />, document.getElementById('root'));

这个留言板组件包含一个输入框和一个“添加留言”按钮，用户可以在输入框中输入留言并点击按钮添加到留言列表中。留言列表使用`map`函数遍历`messages`数组并渲染每个留言。