表单组件属性及ref

比较类似微信小程序的表单组件，直接看代码即可

'use strict'
const Form = React.createClass({
  getInitialState () {
    return {
      'inputValue': ''
    }
  },
  changeHandle (event) {
    console.log('inputValue changed')
    this.setState({
      'inputValue': event.target.value
    })
  },
  render () {
    return <form>
            <input type="text" defaultValue="dd" onChange={this.changeHandle} />  
            //onChange绑定组件的事件，defaultValue默认值
            <input type="checkbox" checked={false}/>//checked状态也可以通过state中的值来读取
            <input type="radio" checked={true}/>
            <select value="b">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
            <select multiple value={['B', 'C']}>//多选的话值为数组
                <option value='A'>A</option>
                <option value='B'>B</option>
                <option value='C'>C</option>
            </select>
            <textarea ></textarea>
        </form>
  }
})
ReactDOM.render(<Form />, document.getElementById('root'))

图片.png

ref属性
作用之一类似id，可以方便的找到对应的浏览器的dom对象

const Comp = React.createClass({
  clickHandler () {
    console.log(this.refs.testInput)  //注意这里是refs对象
  },
  render () {
    return <div>
            <input type="text" ref="testInput" />
            <button onClick={this.clickHandler}>点我</button>
        </div>
  }
})
ReactDOM.render(<Comp />, document.getElementById('root'))

图片.png

作用之二ref属性接收一个回调函数，这个回调函数在组件挂载或者卸载的时候被调用。当ref用于一个HTML元素的时候，ref指定的回调函数在调用的时候会接收一个参数，该参数就是指定的DOM元素。

const Comp = React.createClass({
  componentDidMount () {
    console.log('didMount')
  },
  componentWillMount () {
    console.log('WillMount')
  },
  render () {
    return <div>
            <input type="text" ref={function (dom) {
              console.log(dom)
            }} />
            <button onClick={this.clickHandler}>点我</button>
        </div>
  }
})
ReactDOM.render(<Comp />, document.getElementById('root'))

图片.png