为了账号安全,请及时绑定邮箱和手机立即绑定
  • import React from 'react';
    
    //React避免 Dom 操作,主要是面向数据操作;
      class ToDoList extends React.Component{
    
          //state存放数据的地方;
          constructor(props){
              super(props);
              this.state = {
                 list:[],
                 inputValue:''
              }
    
          }
    
          //修改state用setState;
          handleBtnClick(){
              this.setState({
                  list:[
                      ...this.state.list,//...:数组展开符;
                      this.state.inputValue
                  ],
                  inputValue:''//为了让点击后input值清空;
              });
          }
    
          //监听input值变化;
          handleBtnChange(e){
              this.setState(
                  {
                      inputValue:e.target.value //获取变化值;
                  }
              );
          }
    
          //删除点击的列表项;
          handleItemDelet(index){
    
              //这一步相当于复制list(即副本);在React中对state数据进项操作时,建议对副本操作,提高代码可调实性;
              const list = [...this.state.list];
              list.splice(index,1);
              this.setState({
                  list    //list : list的简化,当key=value时可简化;
              })
    
    
          }
        render(){
          return (
              <div>
                  <div>
                      <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input>
                      <button onClick={this.handleBtnClick.bind(this)}>add</button>
                  </div>
                  <ul>
                      {this.state.list.map((item,index)=>{    //循环list;
                          return <li key={index} onClick={this.handleItemDelet.bind(this,index)}>{item}</li>
                      })}
                  </ul>
              </div>
          );
        }
    }
    
    
    export default ToDoList;


    查看全部
  • import React from 'react';
    
    //React避免 Dom 操作,主要是面向数据操作;
      class ToDoList extends React.Component{
    
          //state存放数据的地方;
          constructor(props){
              super(props);
              this.state = {
                 list:[],
                 inputValue:''
              }
    
          }
    
          //修改state用setState;
          handleBtnClick(){
              this.setState({
                  list:[
                      ...this.state.list,//...:数组展开符;
                      this.state.inputValue
                  ],
                  inputValue:''//为了让点击后input值清空;
              });
          }
    
          //监听input值变化;
          handleBtnChange(e){
              this.setState(
                  {
                      inputValue:e.target.value//获取变化值;
                  }
              );
          }
        render(){
          return (
              <div>
                  <div>
                      <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input>
                      <button onClick={this.handleBtnClick.bind(this)}>add</button>
                  </div>
                  <ul>
                      {this.state.list.map((item,index)=>{//循环list;
                          return <li key={index}>{item}</li>
                      })}
                  </ul>
              </div>
          );
        }
    }
    
    
    export default ToDoList;


    查看全部
  • import React from 'react';
    
    //React避免 Dom 操作,主要是面向数据操作;
      class ToDoList extends React.Component{
    
          //state存放数据的地方;
          constructor(props){
              super(props);
              this.state = {
                 list:[
                 ]
              }
    
          }
    
          //修改state用setState;
          handleBtnClick(){
              this.setState({
                  list:[
                      ...this.state.list,
                      'add css'
                  ]
              });
          }
        render(){
          return (
              <div>
                  <div>
                      <input></input>
                      <button onClick={this.handleBtnClick.bind(this)}>add</button>
                  </div>
                  <ul>
                      {this.state.list.map((item,index)=>{
                          return <li key={index}>{item}</li>
                      })}
                  </ul>
              </div>
          );
        }
    }
    
    
    export default ToDoList;


    查看全部
  • React.Fragment  等价于导入的Fragment

    查看全部
  • 组件最外层的div可以使用 React.Fragment元素代替,在渲染时不会显示最外层标签。

    查看全部
  • [...arr,aa] 展开运算符

    查看全部
  • jsx中只能写表达式不能写语句,此写法错误。

    查看全部
    0 采集 收起 来源:简单的JSX语法

    2020-03-08

  • react Fiber 是react Fiber之后的版本统称

    查看全部
    0 采集 收起 来源:React 简介

    2020-03-03

  • 第一步: 安装 node  

    第二步 :利用脚手架 创建项目 npx create-react-app todolist

    第三步:进入 todolist 文件后 运行项目 npm start

    查看全部
  • react fiber  是指 react 16之后的版本所对应的 react ,对底层的核心算法进行了改良,引入了一些优先级的概念等,使代码运行的更加流畅

    查看全部
    0 采集 收起 来源:React 简介

    2020-02-14

  • jsx中的花括号中只能写表达式,而不能写语句。

    查看全部
    0 采集 收起 来源:简单的JSX语法

    2020-01-30

  • Gig
    查看全部
    0 采集 收起 来源:React 简介

    2020-01-24

  • // 父组件通过属性的形式向子组件传递参数

    // 子组件通过props接口父组件参数

    查看全部
  • React.Fragment 忽略render中的最外层外套


    查看全部
  • React学习官网:

        https://reactjs.org/

                docs

                tutorial

    查看全部

举报

0/150
提交
取消
课程须知
1、对Javascript基础知识已经掌握。 2、对Es6和webpack有简单了解。
老师告诉你能学到什么?
1、React项目架构搭建 2、JSX语法 3、React组件化开发 4、React组件间通信 5、React中的事件 6、React代码优化 7、React中组件的样式修饰

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!