浅谈react受控组件与非受控组件

Posted yiangli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈react受控组件与非受控组件相关的知识,希望对你有一定的参考价值。

  在react中,组件内部主要是通过props和state来存储组件的属性与状态的。其中props是通过父组件传入,在组件内部不能进行修改。而state是保存可变状态的一个对象,通过this.setState方法进行修改,注意不能直接使用this.state.xx = ?来进行修改,这样是没有效果的。每一次setState后都会重新渲染组件。介绍完state后,我们开始介绍受控组件和非受控组件。

受控组件

受控组件,顾名思义是受到控制的组件,那么是通过什么来受到控制呢?

   <input value={this.state.inputValue} />

  当input的value值为state.inputValue时,当用户对input进行操作时,没有对inputValue进行setState()操作,这个值不变,也就意味着input显示不变。但是如果我们给input一个事件,在事件中进行对state的修改,那么值会如何呢?

 inputChange = e => this.setState({value: e.target.value})    
render() {
    return (
        <input value="this.state.value" onChange={this.inputChange}/>
    )
}

  在这里,每当用户输入时,input触发onChange事件,调用inputChange函数修改了value值。使用受控组件,每个状态的改变都有一个与之相关的处理函数。好处是可以直接修改或验证用户输入。

非受控组件

非受控组件不同于受控组件数据是react组件处理的,是通过dom进行处理。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert(‘A name was submitted: ‘ + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

  如官方文档中例子,此时将input通过ref暴露给组件,可以通过this.input进行访问。

以上是关于浅谈react受控组件与非受控组件的主要内容,如果未能解决你的问题,请参考以下文章

极品-------React的组件通信,生命周期,受控组件,与非受控组件

极品-------React的组件通信,生命周期,受控组件,与非受控组件

极品-------React的组件通信,生命周期,受控组件,与非受控组件

极品-------React的组件通信,生命周期,受控组件,与非受控组件

组件设计 —— 重新认识受控与非受控组件

react组件的分类大全,以及受控组件和非受控组件