本文转载自微信公众号《狗狗的前端世界》，作者西岭。转载本文请联系Gogo前端世界公众号。常用受控表单示例受控下拉列表importReact,{Component}from'react'exportclassTablesextendsComponent{state={subject:"HTML"}render(){return(
{this.state.subject}
this.setState({subject:ev.target.value})}>JSHTMLCSS)}}exportdefaultTables控制单选框importReact,{Component}from'react'exportclassTablesextendsComponent{state={sex:"male"}render(){return(
{this.state.sex}
this.setState({sex:ev.target.value})}/>malethis.setState({sex:ev.targett.value})}/>女this.setState({sex:ev.target.value})}/>Demon)}}exportdefaultTablescontrolledcheckboximportReact,{Component}from'react'exportclassTablesextendsComponent{//模拟数据源Datas=[{id:1,title:'HTML',isChecked:false},{id:2,title:'JS',isChecked:true},{id:3,title:'CSS',isChecked:false},]checks=(index,ev)=>{//控制台。log(ev.target.checked)//console.log(index)this.Datas[index].isChecked=ev.target.checked}render(){return(
复选框
{this.Datas.map((data,index)=>{return({/*使用onChange事件绑定，传递下标和事件对象，在处理函数中修改状态*/{this.checks(index,ev)}}/>{data.title})})}console.log(this.Datas)}>显示多选框内容数据)}}exportdefaultTablesuncontrolledform大多数情况下，我们推荐使用controlledform来处理form数据在受控组件中，表单数据由React组件管理。另一种选择是使用不受控制的表单，其中表单数据由DOM节点处理。受控表单需要为每次状态更新编写数据处理函数，而对于非受控表单，您可以使用ref从DOM节点获取表单数据。importReact,{Component}from'react'exportclassTablesextendsComponent{gets=()=>{console.log(this.refs.users.value)}render(){return(
this.gets()}>Get
)}}exportdefaultTables但是这样的用法会在浏览器中看到警告错误信息，原因也很简单的。在新版本的React中，默认启用了严格模式。警告：已在严格模式树中找到字符串引用“users”。我们需要删除入口的index.js中的严格模式代码，如下：ReactDOM.render(
,document.getElementById('root'));修改后是这个样子，错误提示消失：ReactDOM.render(
,document.getElementById('root'));规范写法不过这个方法不好，不要问为什么，不好，推荐使用如下方法：importReact,{Component}from'react'exportclassTablesextendsComponent{constructor(){super()this.myref=React.createRef()}gets=()=>{console.log(this.myref.current.value)}render(){return(
this.gets()}>Get
)}}exportdefaultTables规范化仍然是借助ref实现的，但是这个ref是由React内置的方法创建的createRef()调用后生成，获取时直接调用生成的ref即可。不过需要注意的是，无论使用哪种方法，知道就可以了。如果您不能使用不受控制的形式，请不要使用它。为什么？你敢把不受控制的东西带回家吗？表单将真实数据存储在DOM节点中，因此有时在使用非托管表单时更容易集成React和非React代码。如果您不介意代码美观并希望快速编写代码，使用非托管组件通常可以减少您的代码大小。否则，您应该使用受控组件。总结在应用页面中，与用户的基本交互都是以表单的形式呈现的。按照React框架的设计理念，框架必须负责表单的渲染，表单数据的交互必须依赖框架来控制和依赖。受控形式显然有更多的代码。uncontrolledform是为了在特殊情况下获取Dom而存在的，官方不推荐使用，即使uncontrolledform看起来更好。至此，React的基础语法部分就告一段落了。一路走来，我眼里含着泪水，披荆斩棘，不知所措，我真的很不容易……虽然不容易，但是我那么美，怎么会像这样结束呢？这？不写案例太丢人了！
