循环

• 使用 map 循环来展示列表数据

import React, {Component} from 'react';

class App extends Component {
  state = {
    numList: [
      {
        id: 1,
        value: 111
      },
      {
        id: 2,
        value: 222
      }
    ]
  }

  render() {
    const numItem = this.state.numList.map(item => {
      return (<li key={item.id}>{item.value}</li>)
    })
    return (
      <div>
        <ul>
          { numItem }
        </ul>
      </div>
    );
  }
}

export default App;

ref

• 使用 ref 可以获取到对应的 dom 节点
• 如果给组件设置 ref 属性, 那么最后获取到的是组件对象
• 方法1

import React, {Component, createRef} from 'react';

class App extends Component {
  passwordDom = createRef()

  render() {
    return (
      <div>
        {/*需要 this.passwordDom.current 才能拿到标签, current 是固定的*/}
        <br/>
        <input ref={this.passwordDom} type="text"/>
        <button onClick={() => {
          console.log(this.passwordDom, this.passwordDom.current.value);
        }}>add2</button>
      </div>
    );
  }
}

export default App;

• 方法2 (要被遗弃)

import React, {Component} from 'react';

class App extends Component {

  render() {
    return (
      <div>
        <input ref='usernameDom' type="text"/>
        <button onClick={() => {
          console.log(this.refs.usernameDom, this.refs.usernameDom.value);
        }}>add1</button>
      </div>
    );
  }
}

export default App;

• 注意:
  • 如果想要拿到输入框中的值, 并且不需要传递参数的时候, 可以不使用 ref, 因为可以给 input 输入框中的 onInput 属性绑定方法来监听输入的内容, 此时如果不传参数的话, 该监听方法会自动传入一个参数表示 input 输入框对象

import React, { Component } from 'react';

class App extends Component {

  handlerInput = (event) => {
    // 获取输入框的内容
    console.log(event.target.value)
  }

  render() {
    return (
      <div>
        <input onInput="handlerInput" type="text"/>
      </div>
    );
  }
}

export default App;