受控组件&&非受控组件

声明,本博客摘自:https://segmentfault.com/a/1190000002675685

表单组件像 input、textarea 不同于其它的原生组件,因为它们会随着用户交互而改变。这些组件提供了接口方便我们管理这些交互。

交互属性

表单组件提供了一些受用户交互影响的属性

  • value,支持input、textarea
  • checked,支持input type类型是checkbox或者radio
  • selected,支持option
    在HTML中,textarea 的值是通过子属性设置的。在React中,需要通过value设置。我们可以通过添加事件属性onChange监听内容的变化,onChange会在下列情况下被触发:
  • input或者textarea的内容改变
  • input的checked状态改变
  • select的状态改变

    受控组件

    设定了value的input就是一个受控组件。input里会一直展现这个值

var InputDemo = React.createClass({
    render: function () {
        return (
            <input type="text" value="Hello!"/>
        );
    }
});
React.render(
    <InputDemo />,
    document.body
);

渲染完成后,input里会一直显示Hello!,用户的任何输入都是无效的。如果你想随着用户的输入改变,使用onChange事件

var InputDemo = React.createClass({
    getInitialState: function () {
        return {value: 'Hello!'}
    },
    render: function () {
        return (
            <input type="text" onChange={this.handleChange} value={this.state.value}/>
        );
    },
    handleChange: function (event) {
        this.setState({value: event.target.value});
    }
});
React.render(
    <InputDemo />,
    document.body
);

不受控组件

value没有值或者值设为null的input是一个不受控组件。用户的任何输入都会反映到输入框中

var InputDemo = React.createClass({
    render: function () {
        return (
            <input type="text" value={null}/>
        );
    }
});
React.render(
    <InputDemo />,
    document.body
);

这个时候也可以监听onChange事件,内容的改变也会触发事件。
可以通过defaultValue给input设置默认值

var InputDemo = React.createClass({
    render: function () {
        return (
            <input type="text" defaultValue="xxx"/>
        );
    }
});
React.render(
    <InputDemo />,
    document.body
);

原文地址:https://www.cnblogs.com/huihuihero/p/10921746.html

时间: 2024-10-01 21:40:28

受控组件&&非受控组件的相关文章

受控组件 &amp; 非受控组件

p,pre,span,div,code { font-size: 16px } 在 React 中表单组件可分为两类,受控与非受控组件. 一. 受控组件 设置了 value 的 <input> 是一个受控组件. 对于受控的 <input>,渲染出来的 HTML 元素始终保持 value 属性的值.例如: render() { return <input type="text" value="Hello"/> } 上面的代码将渲染出

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

react路由组件&amp;&amp;非路由组件

<Route exact path="/Home" component={Home}/> 1.路由组件:只有包裹在Route组件里的才能使用`this.props.location`, 2.非路由组件:假如有个需求,是面包屑或者导航组件里需要拿到`this.props.location`(导航组件或者面包屑一般不会包裹在`Route`里吧),那么直接这么写显然就不行了. 这个时候`withRouter`修饰一下,就可以这么写了. . 原文地址:https://www.cnb

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

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值.具体编辑页面中文本框相关的代码如下:         ... //render方法上面的内容省略  <FormItem       label="问题描述:"       hasFeedback      {...props.formItemLayout}  &g

React 受控组件和非受控组件

需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event.target.value;//获取用户的值 ref获取值的另外一种用法 密码: <input type="password" ref={this.Myrefs}></input> Myrefs = React.createRef();//创建一个承装ref的容器 M

react 表单(受控组件和非受控组件)

我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行为是完全受到我们控制的,所以叫做受控组件,比如: 1 class NameForm extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = {value: ''}; 5 6 this.handle

GUI编程(三)-----非容器组件

常用的非容器组件有:JLabel.JTextField.JPasswordField.JRadioButton.JCheckBox.JComboBox.JTextArea. 基本用法: public static void main(String[] args) { JFrame frame= new JFrame("注册"); frame.setSize(500, 400); frame.setLocationRelativeTo(null); //创建一个面板 JPanel pan

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi

vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递. 首先需要在任意地方添加一个bus.js 在bus.js里面 写入下面信息 1 import Vue from 'vue' 2 export default new Vue; 在需要通信的组件都引入B