美文网首页
@芥末的糖-----受控组件和非受控组件

@芥末的糖-----受控组件和非受控组件

作者: 芥末的糖 | 来源:发表于2018-12-03 21:35 被阅读0次
      constructor () {
        super()
        this.state = {
          inputValue: 'test',
        }
      }
      handleInput (e) {
        this.setState({
          inputValue: e.target.value,
        })
      }
    

    1.受控组件

     <textarea 
           value={this.state.inputValue}
           onChange={ this.handleInput.bind(this) }
           //  ref={input => this.ta = input}
           name="" cols="30" rows="10"
           id="content"
     ></textarea>
    

    react中是单向数据流的,我们不能直接修改state的属性

    1.可以通过初始state中设置表单的默认值;
    2.每当表单的值发生变化时,调用onChange事件处理器;
    3.事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state.
    4.setState触发视图的重新渲染,完成表单组件值得更新

    2.非受控组件

     <textarea 
           //value={this.state.inputValue}
           //onChange={ this.handleInput.bind(this) }
           ref={input => this.ta = input}
           name="" cols="30" rows="10"
           id="content"
     ></textarea>
    

    相关文章

      网友评论

          本文标题:@芥末的糖-----受控组件和非受控组件

          本文链接:https://www.haomeiwen.com/subject/kxtfqqtx.html