React快速上手开发

JSX

｜

79

4.13.2

　

value

和

defaultValue

的区别

在

HTML

中，如果你创建一个输入框

<input id="i" value="hello" />

，然后在输入框中

键入

bye

，你会发现：

i.value; // "bye"

i.getAttribute('value'); // "hello"

而在

React

中，

value

属性总是和文本输入框的最新内容保持一致。如果你想指定默认值，

可以使用

defaultValue

属性。

在下面这个代码片段中，你拥有一个

<input>

组件。该组件预先填充的内容为

hello

，还

绑定了一个

onChange

处理器。当把

hello

的最后一个字符

o

删掉时，

value

的值变为

hell

，

而

defaultValue

的值仍然是

hello

：

function log(event) {

console.log("value: ", event.target.value);

console.log("defaultValue: ", event.target.defaultValue);

}

React.render(

<input defaultValue="hello" onChange={log} />,

document.getElementById('app')

);

你应当把这种模式应用到自定义组件中：如果你需要接收一个属性，并暗示

用户该属性应该一直是最新的（比如

value

、

data

），就让其保持更新。否则

请把属性名改为

initialData ...