在React的主页上，有最后一个example https://reactjs.org/#a-component-using-external-plugins (使用外部插件的组件）与一个textarea:
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
当我打字时，textarea得到更新。
现在，我试图改变defaultValue with value:
<textarea
id="markdown-content"
onChange={this.handleChange}
value={this.state.value}
/>
结果是一样的（就像defaultValue，即当我输入时，textarea使用更新的文本进行视觉更新）。
那么，两者之间真正的区别是什么？
我认为一个很好的例子是如果您使用硬编码字符串
使用 defaultValue 属性：
function App(){
return(
<textarea
defaultValue="foo" // only by default foo
/>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
使用价值道具
function App(){
return(
<textarea
value="foo" // will forever be foo
/>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
因此，虽然本段下面的代码片段可能看起来与使用相同value道具因为onChange可能会更新状态值（因此看起来正在更新defaultValue道具） - 事实并非如此。这是still不受控制的组件，将直接根据用户输入更新其值。它只是用默认值初始化this.state.value是它最初渲染的时间。
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
