react实现todolist（拆分组件）

最新推荐文章于 2022-08-12 14:10:08 发布

无穷已_

最新推荐文章于 2022-08-12 14:10:08 发布

阅读量121

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/About_zero/article/details/115899208

版权

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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 Ipt extends Component {
        constructor(props) {
          super(props);
          this.state = {};
        }
        render() {
          return (
            <div>
              <input
                type="text"
                value={this.props.inputValue}
                onChange={this.props.changeValue}
              />
              <button onClick={this.props.add}>添加</button>
            </div>
          );
        }
      }
      class List extends Component {
        constructor(props) {
          super(props);
          this.state = {};
        }
        render() {
          return (
            <div>
              <ul>
                <li>
                  {this.props.lists.map((item, index) => {
                    return (
                      <li key={index} onClick={() => this.props.del(index)}>
                        {item}
                      </li>
                    );
                  })}
                </li>
              </ul>
            </div>
          );
        }
      }
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            inputValue: "react",
            list: [1, 2, 3],
          };
        }
        // 改变value
        changeValue = (e) => {
          console.log(e.target.value);
          this.setState({
            inputValue: e.target.value,
          });
        };
        // 添加
        add = () => {
          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() {
          return (
            <div>
              <Ipt
                inputValue={this.state.inputValue}
                changeValue={this.changeValue}
                add={this.add}
              />
              <List lists={this.state.list} del={this.del} />
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>

无穷已_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react实现todolist（拆分组件）

<!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" /> <titl
复制链接

扫一扫