React 基础笔记(父子组件传值)(十)

(1) 利用 props

React 中 props 在 react 中父给子传递的都是属性,方法都可以传递,子属性要是想改变父组件的值只有调用父组件的方法，而不是发射出去事件让父组件监听

• 父组件

import React, { Component, Fragment } from 'react'
import './Todolist.css'
import TodoItem from './Todoitem.js' // 引入子组件
class Todolist extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '请输入内容',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        <input
          type="text"
          value={this.state.value}
          onChange={this.changeall.bind(this)}
        />
        <button className="btn" onClick={this.dianji.bind(this)}>
          请点击
        </button>
        <ul>
          {this.state.list.map((value, index) => {
            return (
              <TodoItem
                data={value}
                index={index}
                deleteItem={this.deleteDate.bind(this)} //props绑定事件,必须把bind this传进来
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
  dianji() {
    let result = [...this.state.list, this.state.value]
    this.setState({
      list: result,
      value: ''
    })
  }
  changeall(e) {
    let value = e.target.value
    this.setState({
      value
    })
  }
  deleteDate(index) {
    let result = [...this.state.list]
    result.splice(index, 1) //删除数组制定项
    this.setState({
      list: result
    })
  }
}

export default Todolist

• 子组件

import React, { Component, Fragment } from 'react'
class Todoitem extends Component {
  constructor(props) {
    super(props)
    this.deleteData = this.deleteData.bind(this)
  }
  render() {
    return (
      <Fragment>
        <li onClick={this.deleteData}>{this.props.data}</li>
      </Fragment>
    )
  }
  deleteData() {
    let index = this.props.index
    this.props.deleteItem(index)
  }
}

export default Todoitem

总结

1. 利用 props 进行给子组件传值