如何在 React 中将数据添加到待办事项？

Question

import React from 'react';
import './App.css';

class App extends React.Component{
  handleClick(){
    alert("CLICKED!!!!");
  }
  render(){
    return (
      <div>
      <div className="app-header">
        Todo Today
      </div>
      <center>
        <input type="text"></input>
        <button onClick={this.handleClick}>ADD</button>
      </center>
      <center>
        <ul>
          <ul>TODO 1</ul>
          <ul>TODO 2</ul>
          <ul>TODO 3</ul>
        </ul>
      </center>
      </div>
    )
  }
}
export default App;

我用 React 构建了一个待办事项列表，当我处理单击按钮时，如何将输入的内容发送到 TODO 1、2、3？

谢谢你

Answer 1

这可以很容易地实现，如下所示：

import React from "react";
import "./styles.css";

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      input: "",
      todos: []
    };

    this.handleUpdate = this.handleUpdate.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleUpdate(e) {
    this.setState({
      input: e.target.value
    })
  }

  handleClick() {
    this.setState({
      input: "",
      todos: [
        ...this.state.todos,
        this.state.input
      ]
    })
  }
  render() {
    return (
      <div>
        <div className="app-header">Todo Today</div>
        <center>
          <input onChange={this.handleUpdate} value={this.state.input} type="text" />
          <button onClick={this.handleClick}>ADD</button>
        </center>
        <center>
          <ul>
          {this.state.todos.map((item, index) => {
            return <li key={index}>{item}</li>
          })}
          </ul>
        </center>
      </div>
    );
  }
}
export default App;

您可以在此处找到一个工作示例。