受控组件和非受控组件，强力一波

FrancisSoung 发布于2019-08-26 18:27 / 3379人阅读

摘要：受控组件其值由控制的输入表单元素称为受控组件。如果让表单数据由处理时，替代方案为使用非受控组件。使用非受控组件时，通常你希望可以为其指定初始值，但不再控制后续更新。

受控组件

其值由React控制的输入表单元素称为“受控组件”。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      
        
          Name:
          
        
        
      
    );
  }
}

通过绑定onChange实现了类似双向绑定
理解：首先input的显示的值受value={this.state.value}
控制，输入时通过onChange函数回调，将新接受的值设置回this.state.value,从而再作用到组件的显示，形成了双向绑定的感觉

非受控组件

在大多数情况下，我们推荐使用 受控组件 来实现表单。 在受控组件中，表单数据由 React 组件处理。如果让表单数据由 DOM 处理时，替代方案为使用非受控组件。

默认值 defaultValue

在 React 的生命周期中，表单元素上的 value 属性将会覆盖 DOM 中的值。
使用非受控组件时，通常你希望 React 可以为其指定初始值，但不再控制后续更新。要解决这个问题，你可以指定一个 defaultValue 属性而不是 value。

render() {
  return (
    
      
        Name:
         this.input = input} />
      
      
    
  );
}

文件输入标签

在React中，始终是一个不受控制的组件，因为它的值只能由用户设置，而不是以编程方式设置。

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.files[0].name}`
    );
  }

  render() {
    return (
      
        
          Upload file:
           {
              this.fileInput = input;
            }}

          />

        
        

        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

受控和非受控你该怎么选

原文
Conclusion
Both the controlled and uncontrolled form fields have their merit. Evaluate your specific situation and pick the approach — what works for you is good enough.
If your form is incredibly simple in terms of UI feedback, uncontrolled with refs is entirely fine. You don’t have to listen to what the various articles are saying is “bad.”
Also, this is not an once-and-for-all decision: you can always migrate to controlled inputs. Going from uncontrolled to controlled inputs is not hard.
两种方法都有各自的优点，根据具体使用场景评估一下，从中选择一种更适合的方式，如果表单在UI反馈方面非常简单，那么使用ref的不受控组件就完全没有问题。你不必听各种各样的文章说什么是“坏的”，同样也不是说不能更改，毕竟总是可以转换到可控制的，使用受控的话也不是很费劲。

GPU云服务器云服务器多台受控服务器云服务器受控端管理服务器受控服务器组件和组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110223.html

React中受控与非受控组件

摘要：首次发表在个人博客受控组件或都要绑定一个事件每当表单的状态发生变化都会被写入组件的中这种组件在中被称为受控组件在受控组件中组件渲染出的状态与它的或者向对应通过这种方式消除了组件的局部状态是的应用的整个状态可控官方同样推荐使用受控表单组件总结首次发表在个人博客受控组件 { this.setState({ value: e.target.val...

wenhai.he 2019-08-22 11:16 评论0 收藏0
React组件编写思路（二）

摘要：那什么时候使用受控组件，什么时候使用非受控组件呢我们知道受控组件是比较符合我们传统组件开发的思路的。故最基本的组件编写套路就这些。上一篇讲了 React 两种最常见的组件：受控组件和非受控组件。为了可用性，我们一般编写出来的组件希望支持这两种特性：可以通过组件自身的方法来改变组件的某(些)状态，也可以通过 props 的值的变化来改变组件自身的同一个(些)状态。组件改变自己的状态只...

Muninn 2019-08-20 16:30 评论0 收藏0
[ 一起学React系列 -- 5 ] 如何优雅得使用表单控件

摘要：假如我们从后台拉取一个数据要填入输入框，那么必须得使用受控组件，因为非受控组件只能被用户输入。不影响正常输入填充该输入框的默认值，此时不显示内容。网页中使用的form表单大家肯定都再熟悉不过了，它主要作用是用来收集和提交信息。React中的表单组件与我们普通的Html中的表单及其表现形式没有什么不同，所以如何使用表单我觉得再拿出来说可能是画蛇添足、毫无意义。不过再怎么样也不能辜负大家...

Charlie_Jade 2019-08-26 12:20 评论0 收藏0
掌握react，这一篇就够了

摘要：小明小明儿子，可以看到组件显示了父组件的。小明受控组件和非受控组件受控组件和非受控组件这些都是指的表单组件，当一个表单的值是通过改变的而不是通过是受控组件，否则就是非受控组件。 react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。 jsx语法前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx...

Enlightenment 2019-08-23 11:45 评论0 收藏0