「React源码分析」十. React DOM之textarea组件操作分析

最新推荐文章于 2024-05-13 20:19:46 发布

英国大爷扫广场

最新推荐文章于 2024-05-13 20:19:46 发布

阅读量673

点赞数

分类专栏： 2021SC@SDUSC 文章标签： react.js reactjs 源码前端 react

本文链接：https://blog.csdn.net/u012922190/article/details/121735480

版权

2021SC@SDUSC

ReactDOM textarea组件操作源码分析

与input组件类似，ReactDOM实现了可控的<textarea>组件，允许设置value和defaultValue属性。但这与传统的DOM API不同，传统DOM API中textarea的值被设置为PCDATA中的子元素。
与ReactDOM对input组件封装的操作类似，如果value属性没有提供（或为null/undefined），用户改变所选选项的行为只会触发<textarea>组件自身的更新，更新渲染所输入的内容。反之如果指定了value属性，那么它将成为一个受控组件，用户的输入操作不会再触发<textarea>组件自身的更新，而需要用户自己在父组件中控制value的值，改变传入的props来造成<textarea>的更新。

相关源码在packages\react-dom\src\client\ReactDOMTextarea.js中定义。

initWrapperState

export function initWrapperState(element: Element, props: Object) {
   
  const node = ((element: any): TextAreaWithWrapperState);
  if (__DEV__) {
   
    checkControlledValueProps('textarea', props);
    if (
      props.value !== undefined &&
      props.defaultValue !== undefined &&
      !didWarnValDefaultVal
    ) {
   
      console.error(
        '%s contains a textarea with both value and defaultValue props. ' +
          'Textarea elements must be either controlled or uncontrolled ' +
          '(specify either the value prop, or the defaultValue prop, but not '</