react中的 受控元素

什么叫受控元素？

就是说页面到底渲染成什么样完全由数据说了算，数据去控制它，那这种元素就被称为受控元素

受控元素指的是什么呢？

• 我们在元素 view 层有时会做一些事情，用户会在 view 层做操作，他操作完有可能会去改变原本视图层的内容
• 比如我们在输入框有一个字符串，这个字符串就是一个数据，当我们去改变了这个值，那它能不能改？如果不能改，说明数据写死的是这个字符串，你在这里改是改不掉的，那么这个输入框就会变成一个受控元素
• 就是我们本来有能力改掉的东西，但是你发现你改不了，那么这就是一个受控元素

受控元素

表单的value受控，受数据控制

<input type="text" value={this.state.content} />

• 就像这样我们给它一个默认值，如果我们再点击输入框的时候机会发现无法修改
• 并且会有一个提示：
  • 你看到的 value值实际上是一个受控元素，如果你想为非受控元素，你应该用 defaultValue来代替 里面的 vlaue）
    

怎么样把model 的数据拿去控制表单 的 value 值？

• this.state.数据名 把你的数据绑过去
• 这个时候 model层的数据送到 我们的view层，那么我的view层就受这条数据的控制

受控元素双向数据绑定

view 层反向修改 model 层数据（通过 onChange ）

import React from 'react';
import ReactDom from 'react-dom'


class App extends React.Component {

  state={
    title:'受控元素',
    ipt:'输入的值'
  };

  checkIpt = (ev) => {    //默认传递事件对象 ev ，拿到这个事件对象就可以拿到事件目标（事件对象是一个虚拟 dom）
    this.setState({ipt:ev.target.value})
  };

  render(){

    let {title,ipt} = this.state;

    return (
      <div>

        <input type="text" value={ipt} onChange={this.checkIpt} />

      </div>
    )
  }
}

ReactDom.render(
  <App />,
  document.getElementById('root')
);

处理多个输入元素

• 在上述代码中，我们每修改一个输入框里面的内容就需要调用一个函数，那么我们的函数就会越写越多，并且内容基本上相同
• 这时我们就可以通过 name 来实现多个元素只调用一个函数来实现数据的双向绑定（实际上仍然是单向的）
• 可以为每个元素添加一个 name 属性(通常和数据名一致)，处理函数根据 event.target.name 的值来选择要做什么

<input name="inputUserName" 
<input name="inputContent"

this.setState({[ev.target.name]:ev.target.value})

代码展示：

import React from 'react';
import ReactDom from 'react-dom'

//处理多个输入元素

class App extends React.Component {

  state={
    title:'注册',
    username:'',
    password:'',
  };

  //处理多个输入元素
  checkIpt = (ev) => {
    this.setState({
      [ev.target.name]:ev.target.value   //这里我们通过 ev.target.name 来获取事件目标头上的 name
      									 // 通过 ev.target.value 再来获取到对应的值
    })
  };


  render(){

    let {title,username,password} = this.state;

    return (
      <div>

        <h3>{title}</h3>

        <input type="text" name="username" value={username} onChange={this.checkIpt}/>
        <input type="text" name="password" value={password} onChange={this.checkIpt}/>

      </div>
    )
  }
}

ReactDom.render(
  <App />,
  document.getElementById('root')
);

结果展示：