React子组件和父组件通信

  1. 子组件获取父组件属性：props或者state
  2. 子组件调用父组件的方法
  3. 父组件获取子组件的属性：props或者state
  4. 父组件调用子组件的方法

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { Component } from 'react'

import { userList } from 'src/services/user'
import Test from 'component/Test'
import { Button } from 'antd-mobile'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hidden: false,
      message: '',
      mesCons: [],
      name: 'zhangsan',
      age: '12',
      sex: 'man',
    }
    // this.handleFn = this.handleFn.bind(this)
  }

  getInitialState() {}
  async componentDidMount() {
    // const { data } = await userList()
  }

  handleFn = value => {
    if (value === 'focus') {
      this.setState({ hidden: true }, () => {
        console.log('这里执行了...')
      })
    } else {
      this.setState({ hidden: false })
    }
  }
  changeFn(e) {
    this.setState({
      message: e.target.value,
    })
  }
  send() {
    let list = [...this.state.mesCons]
    let keywords = '钱'
    if (this.state.message.indexOf(keywords) > -1) {
      list.push({
        type: 4,
        value: this.state.message,
      })
    } else {
      list.push({
        type: 1,
        value: this.state.message,
      })
    }
    this.setState({
      mesCons: list,
      hidden: false,
      message: '',
    })
  }
  callback = mes => {
    alert('子组件改变父组件', mes)
  }
  render() {
    return (
      <div className="layout">
        <div className="contain">
          <div className="text-box">
            <Test
              {...this.state}
              list={this.state.mesCons}
              jbFn={this.callback}
            />
          </div>
          <div className="input-box">
            <input
              type="text"
              value={this.state.message}
              placeholder="写下你想说的..."
              onFocus={this.handleFn.bind(this, 'focus')}
              onChange={this.changeFn.bind(this)}
              // onBlur={this.handleFn.bind(this, 'blur')}
            />
            {this.state.hidden ? (
              <Button type="primary" onClick={this.send.bind(this)}>
                发送
              </Button>
            ) : null}
          </div>
        </div>
      </div>
    )
  }
}

export default App

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { Component } from 'react'

export default class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.test1 = this.test1.bind(this)
  }
  test1() {
    this.props.jbFn('注意言行！！！')
  }
  render() {
    return (
      <div>
        <div>
          {this.props.list.map((item, index) => {
            return item.type !== 4 ? (
              <div key={index} className="mesitem">
                {item.value}
              </div>
            ) : (
              <div key={index}>
                <div className="tag_jg" onClick={this.test1}>
                  以下文字有诱骗的嫌疑，点击举报！！
                </div>
                <div className="mesitem">{item.value}</div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}