（2）React的开发

实例：

import React from 'react';

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [
       'learn react',
       'learn english',
       'learn vue'
      ]
    }
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, 'hello world']
    })
    this.state.list.push('hello world');
  }

  render() {
  	
  	return (
      <div>
        <div>
          <input/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item) => {
              return <li>{item}</li>
            })
          }
        </ul>
      </div>
  	);
  }

}

export default TodoList;

新增列表 项功能

import React from 'react';

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [
      ],
      inputValue: ''
    }
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  render() {
  	
  	return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item) => {
              return <li>{item}</li>
            })
          }
        </ul>
      </div>
  	);
  }

}

export default TodoList;

删除：

import React from 'react';

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [
      ],
      inputValue: ''
    }
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  handleItemClick(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }

  render() {
  	
  	return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li>
            })
          }
        </ul>
      </div>
  	);
  }

}

export default TodoList;

React中组件

import React from 'react';
import TodoItem from './TodoItem'

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [
      ],
      inputValue: ''
    }
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  handleItemClick(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }

  render() {
  	
  	return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <TodoItem key={index} content={item}/>
            })
          }
        </ul>
      </div>
  	);
  }

}

export default TodoList;

import React from 'react';

class TodoItem extends React.Component {
	render() {
		return (
         <div>{this.props.content}</div>
		)
	}
}

export default TodoItem;

import React from 'react';
import TodoItem from './TodoItem'

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [
      ],
      inputValue: ''
    }
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  // handleItemClick(index) {
  //   const list = [...this.state.list];
  //   list.splice(index, 1);
  //   this.setState({
  //     list: list
  //   })
  // }

  handleDelete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })

  }

  render() {
  	
  	return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
          <button onClick={this.handleBtnClick.bind(this)}>add</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <TodoItem delete={this.handleDelete.bind(this)} key={index} content={item} index={index}/>
            })
          }
        </ul>
      </div>
  	);
  }

}

export default TodoList;

代码优化：

import React from 'react';
import TodoItem from './TodoItem'

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  // handleItemClick(index) {
  //   const list = [...this.state.list];
  //   list.splice(index, 1);
  //   this.setState({
  //     list: list
  //   })
  // }

  handleDelete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }

  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
          return (
            <TodoItem 
            delete={this.handleDelete}
            key={index}
            content={item} 
            index={index}
            />
          )
      })         
    )
  }

  render() {
  	
  	return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </div>
  	);
  }

}

export default TodoList;

import React from 'react';

class TodoItem extends React.Component {

	// 子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
	
	constructor(props) {
		super(props);
		this.handleDelete = this.handleDelete.bind(this);
	}

	handleDelete() {
		// const { delete, index } = this.props;
		// delete(index);
		
		this.props.delete(this.props.index);
		console.log(this.props.index)
	}

	render() {
		const { content } = this.props;
		return (
         <div onClick={this.handleDelete}>{this.props.content}</div>
		)
	}
}

export default TodoItem;

写css

import React from 'react';
import TodoItem from './TodoItem'

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  // handleItemClick(index) {
  //   const list = [...this.state.list];
  //   list.splice(index, 1);
  //   this.setState({
  //     list: list
  //   })
  // }

  handleDelete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }

  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
          return (
            <TodoItem 
            delete={this.handleDelete}
            key={index}
            content={item} 
            index={index}
            />
          )
      })         
    )
  }

  render() {
  	
  	return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button className='red-btn' style={{background: 'red', color: '#fff'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </div>
  	);
  }

}

export default TodoList;

有两层：

import React from 'react';
import TodoItem from './TodoItem'

class TodoList extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  // handleItemClick(index) {
  //   const list = [...this.state.list];
  //   list.splice(index, 1);
  //   this.setState({
  //     list: list
  //   })
  // }

  handleDelete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }

  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
          return (
            <TodoItem 
            delete={this.handleDelete}
            key={index}
            content={item} 
            index={index}
            />
          )
      })         
    )
  }

  render() {
  	
  	return (
      <React.Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button className='red-btn' onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </React.Fragment>
  	);
  }

}

export default TodoList;

import React,{Component} from 'react';

class TodoItem extends Component {

	// 子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
	
	constructor(props) {
		super(props);
		this.handleDelete = this.handleDelete.bind(this);
	}

	handleDelete() {
		// const { delete, index } = this.props;
		// delete(index);
		
		this.props.delete(this.props.index);
		console.log(this.props.index)
	}

	render() {
		const { content } = this.props;
		return (
         <div onClick={this.handleDelete}>{this.props.content}</div>
		)
	}
}

export default TodoItem;

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem'

class TodoList extends Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  // handleItemClick(index) {
  //   const list = [...this.state.list];
  //   list.splice(index, 1);
  //   this.setState({
  //     list: list
  //   })
  // }

  handleDelete(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }

  getTodoItems() {
    return (
      this.state.list.map((item, index) => {
          return (
            <TodoItem 
            delete={this.handleDelete}
            key={index}
            content={item} 
            index={index}
            />
          )
      })         
    )
  }

  render() {
  	
  	return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange}/>
          <button className='red-btn' onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>{this.getTodoItems()}</ul>
      </Fragment>
  	);
  }

}

export default TodoList;

.red-btn {
	background: red;
	color: #fff;
}

import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './TodoList';
import './style.css'

ReactDOM.render(<TodoList />, document.getElementById('root'));

---

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774