React入门(二)组件

本节知识点

(1)React组件化

(2)React父子组件传值

(一)组件

在React中组件都是对应的一个个类,每一个js文件都可以代表一个组件。
组件之间引用的时候必须要通过import而且首字母必须要大写

import List from './list'
class App extends Component {
 render() {
    return (
      <Fragment>
        {/*这就是注释*/}
        <input value={this.state.value2} onChange={this.change.bind(this)} />
        <button onClick={this.tijiao.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <List
                content={item}
                index={index}
                deletedate={this.deleteone.bind(this)}
                key={index}
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
}

父组件给子组件传值

传递的值可以是方法(记住绑定this),也可以是值

子组件修改父组件传递过来的值

必须依赖父组件传递过来的方法
第一步父组件把方法传递过来。
第二部子组件在调用
下面这个示例就是父组件把deleteone方法以deletedate形式传递给了子组件
子组件接受后调用的时候就是this.props.deledate
子组件

import React, { Component } from 'react'
class list extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return <div onClick={this.deleteone.bind(this)}>{this.props.content}</div>
  }
  deleteone() {
    let value = this.props.index
    console.log(value)
    this.props.deletedate(value)
  }
}

export default list

父组件 注意看deleteone

import React, { Component, Fragment } from 'react'
import List from './list'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value2: '请输入要输入的值',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        {/*这就是注释*/}
        <input value={this.state.value2} onChange={this.change.bind(this)} />
        <button onClick={this.tijiao.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <List
                content={item}
                index={index}
                deletedate={this.deleteone.bind(this)}
                key={index}
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
  change(e) {
    console.log(e.target.value)
    this.setState({
      value2: e.target.value
    })
  }
  tijiao() {
    let list2 = [...this.state.list, this.state.value2]
    this.setState({
      list: list2,
      value2: ''
    })
  }
  deleteone(index) {
    console.log(index)
    let list2 = [...this.state.list]
    list2.splice(index, 1)
    this.setState({
      list: list2
    })
  }
}

export default App