React笔记 （二）组件拆分传值父子组件之间的传值

组件拆分传值

• 首先创建一个新的组件在父组件引入
• 在父组件调用子组件首字母必须大写，转入的属性，子组件直接this.props.item就可以调用
• 子组件想要调用父组件的方法，父组件需先将事件传入父组件，并且把this也传过去确保子组件可以调用。
• 之后子组件就可以通过this.props.function调用父组件的方法了，从而传值

父组件：

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

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "qwewqe",
      list: ["吃饭","睡觉"]
    }
  }

  render() {
    return (
      <div className="TodoList">
        <div>
          <label htmlFor="insertArea">输入内容</label>
          <input 
            id="insertArea"
            value = {this.state.inputValue} 
            onChange = {this.inputChange.bind(this)}
          />
          <button onClick = {this.submit.bind(this)}>提交</button>
        </div>
        
        <ul>
          {
            this.state.list.map((item,index) => {
              return (
                <div>
                  <TodoItem content = {item} itemIndex={index} listClose={this.listClose.bind(this)}></TodoItem>
                </div>
              )
            })
          }
        </ul>
      </div>
    );
  }

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

  submit() {
    if(this.state.inputValue){
      this.setState({
        list: [...this.state.list,this.state.inputValue],
        inputValue: ""
      })
    }
  }

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

export default TodoList;

子组件：

import React, { Component } from 'react';
import './index.css';

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.listClose = this.listClose.bind(this);
  }

  render() {
    return (
      <div key={this.props.itemIndex}>
        <div className="list-box">
          <li>{this.props.content}</li>
          <div className="detil" onClick={this.listClose}>X</div>
        </div>
      </div>
    );
  }

  listClose(){
    this.props.listClose(this.props.itemIndex);
    console.log(this.props.itemIndex);
  }


}

export default TodoItem;