react实现todolist（不拆分组件）_react 不使用组件传值todulist-优快云博客

本文介绍了一个使用React实现的基本应用案例，该应用具备输入框与按钮，支持用户输入内容并添加到下方列表中，同时允许用户从列表中删除已添加的项。通过这个例子，读者可以了解如何在React中管理状态(state)、处理事件以及更新UI。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { Component } = React;
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            inputValue: "react",
            list: [1, 2, 3],
          };
        }
        // 输入框值改变，state里面的值发生变化
        changeValue = (e) => {
          console.log(e.target.value);
          this.setState({
            inputValue: e.target.value,
          });
        };
        // 添加
        add = () => {
          console.log(this.state.inputValue);
          this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: "",
          });
        };
        // 删除
        del(index) {
          console.log(index);
          const newList = this.state.list;
          newList.splice(index, 1);
          this.setState({
            list: [...newList],
          });
        }
        render() {
          const { inputValue, list } = this.state;
          return (
            <div>
              <input
                type="text"
                value={inputValue}
                onChange={this.changeValue}
              />
              <button onClick={this.add}>添加</button>
              <ul>
                <li>
                  {list.map((item, index) => {
                    return (
                      <li key={index} onClick={() => this.del(index)}>
                        {item}
                      </li>
                    );
                  })}
                </li>
              </ul>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>