react Input的defaultValue和value属性学习

文章参考

  1. react 表单

问题描述

在工作中用antdDesign UI组件写Input表单的时候,发现需要同时设置默认值和用户可以手动输入改变值(修个表的数据),发现搞不清defaultValue和value的作用,能否同时使用?彼此是否会产生影响?编译是否会报错?

状态属性

表单元素有这么几种属于状态的属性:

  • value,对应 和 所有
  • checked,对应类型为 checkbox 和 radio 的 所有
  • selected,对应 所有

受控组件

对于设置了上面提到的对应“状态属性“值的表单元素就是受控表单组件,比如:

render: function() {
    return <input type="text" value="hello"/>;
}

非受控组件

和受控组件相对,如果表单元素没有设置自己的“状态属性”,或者属性值设置为 null,这时候就是非受控组件。

它的表现就符合普通的表单元素,正常响应用户的操作。

为什么要有受控组件?

引入受控组件不是说它有什么好处,而是因为 React 的 UI 渲染机制,对于表单元素不得不引入这一特殊的处理方式。

在浏览器 DOM 里面是有区分 attribute 和 property 的。attribute 是在 HTML 里指定的属性,而每个 HTML 元素在 JS 对应是一个 DOM 节点对象,这个对象拥有的属性就是 property(可以在 console 里展开一个 DOM 节点对象看一下,HTML attributes 只是对应其中的一部分属性),attribute 对应的 property 会从 attribute 拿到初始值,有些会有相同的名称,但是有些名称会不一样,比如 attribute class 对应的 property 就是 className。(详细解释:.prop,.prop() vs .attr())

回到 React 里的 输入框,当用户输入内容的时候,输入框的 value property 会改变,但是 value attribute 依然会是 HTML 上指定的值(attribute 要用 setAttribute 去更改)

React 组件必须呈现这个组件的状态视图,这个视图 HTML 是由 render 生成,所以对于

render: function() {
    return <input type="text" value="hello"/>;
}

在任意时刻,这个视图总是返回一个显示 hello 的输入框。

个人理解

如果input 表单只是显示默认值,不会手动去修改该值,则值需要使用defaultValue,如果需要获取用户输入的值,则一定要用value属性,但是一定要配合onchange事件一起使用,否则值是不会变的

案例

<Input placeholder="选择规格属性名称" defaultValue={item.title} value={item.title} readOnly className={styleObj["width-360"]}/>

<Input defaultValue={text} value={text} onChange={that.tableInputChange.bind(that, record,'price')}/>

如果设置了value的值,则要么添加onChange事件要么添加readOnly属性,否则编译器会提示报错

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试