美文网首页
受控组件和非受控组件

受控组件和非受控组件

作者: 张义飞 | 来源:发表于2018-05-04 13:04 被阅读0次

受控组件和不受控组件

受控组件是指:数据来源比较单一,非受控组件来源比较复杂。我们

应该尽量的避免使用非受控组件,比如input标签的value属性这个来源可能是用户的输入,也可能作为默认值进行输入。比如我们封装了一个Search组件

//search.jsx

const Search = (props) => {
  return <input value={props.defaultValue} onChange={props.onChange} />
}

// app.jsx

import Search from './search.jsx';

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            value: ''
        };
        this.handleOnChange = this.handleOnChange.bind(this);
    }
    
    render() {
        return(<Search value={this.state.value} onChange={this.handleOnChange}/>);
    }
    
    handleOnChange(e) {
        this.setState({
            value: e.target.value;
        });
    }
}

个人思考: 我们应该避免将状态引入到相关的组件中去,尽量创造受控组将。

相关文章

  • 受控组件和非受控组件

    受控组件和不受控组件 受控组件是指:数据来源比较单一,非受控组件来源比较复杂。我们 应该尽量的避免使用非受控组件,...

  • React基础篇之收集表单数据

    非受控组件 受控组件

  • 受控组件 和 非受控组件

    概览 文章内容选自陈屹的《深入React技术栈》,本文的主题是介绍受控组件与非受控组件。 内容 1、受控组件(Re...

  • 受控组件和非受控组件

    受控组件 受控组件如果这个组件的状态是受react控制的就是受控组件,比如 上面的input里的name是默认我们...

  • 受控组件和非受控组件

    受控组件: 非受控组件-使用refref第一种写法: ref第二种写法: String Ref(已过时,会被移除)...

  • 受控组件和非受控组件

    非受控组件 1 .类似于传统的HTML表单输入,如果想要获取输入的值,从ref获取他们 2 .你需要自己从表单域中...

  • 受控组件和非受控组件

    其值由React控制的输入表单元素称为“受控组件”。 受控组件有两个特点:1.设置value值时,value由st...

  • 受控组件和非受控组件

    受控组件:input中的value值通过state值获取,onChange事件改变state中的value值,in...

  • 受控组件和非受控组件

    非受控组件 1 .类似于传统的HTML表单输入,如果想要获取输入的值,从ref获取他们 受控表单 1 .接受当前值...

  • 受控组件 和 非受控组件

    1.前言 之前一直没有看受控组件和非受控组件,今天抽空来 捋一下 2. 基础 首先明确受控组件和非受控组件都指的是...

网友评论

      本文标题:受控组件和非受控组件

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