react入门示例01

import React, { Component, Fragment } from 'react'

export class Books extends Component {
  constructor(props){
      super(props)
      this.state = {
        inputValue:"平凡的世界",
        books:["西游记","三国演义","水浒传"]
      }
  }
  AddBook(){
      const books = [...this.state.books,this.state.inputValue];
    	//更改state，需要调用setState方法
      this.setState({
        books
      });
  }
  deleteBook(index){
      const books = this.state.books.filter((item,i)=>{
          return i !== index; 
      });
    this.setState({
        books
    }); 
  }
  onChangeInput(e){
    this.setState({
        inputValue:e.target.value
    });
  }

  render() {
    return (
      <Fragment>
          <div>
              {
                // 1.jsx中注释要写在 {}  中
                // 2.label标签在jsx中要使用htmlFor
              }
              <label htmlFor="liuzq">加入服务：</label>
            { /* 调用方法时，绑定在标签上的事件上的方法，
            	   需要考虑this指向问题,使用bind更改一下this指向，this.onChangeInput.bind(this)
            */ 
            }
              <input id="liuzq"  value={this.state.inputValue} onInput={this.onChangeInput.bind(this)}/>
              <button onClick={this.AddBook.bind(this)}>增加书籍</button>
          </div>
          <ul>
              {
                  this.state.books.map((item,index)=>{
                      return  <li key={index}>{item} <span onClick={this.deleteBook.bind(this,index)}>X</span></li>
                  })
              }
          </ul>
      </Fragment>
    )
  }
}

export default Books

小例总结

​ 该示例实现，书籍列表展示，添加书籍和删除书籍的功能

// 1.jsx中注释要写在 {}  中
// 2.class在JSX中要替换为 className
// 2.label标签在jsx中要使用htmlFor
// 3.更改state，需要调用setState方法
// 4.调用方法时，绑定在标签上的事件上的方法，需要考虑this指向问题,使用bind更改一下this指向，this.onChangeInput.bind(this)

小技巧：灵活使用插件Simple React Snippets，快捷生成代码