共计 3270 个字符,预计需要花费 9 分钟才能阅读完成。
导读 | 规范化的方式依然是借助 ref 来实现,只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的,在获取时,直接调用生成的 ref 就可以了。 |
受控的下拉列表
import React, {Component} from 'react'
export class Tables extends Component {
state = {subject: "HTML"}
render() {
return (
<div>
<p>{this.state.subject}</p>
<select name=""id="" value={this.state.subject}
onChange={(ev) => this.setState({ subject: ev.target.value}
)
}>
<option value="JS">JS</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
</div>
)
}
}
export default Tables
受控单选框
import React, {Component} from 'react'
export class Tables extends Component {
state = {sex: "男"}
render() {
return (
<div>
<p>{this.state.sex}</p>
<input type="radio" name="sex" id=""value=" 男 "
onChange={(ev) => this.setState({sex: ev.target.value})
} /> 男
<input type="radio" name="sex" id=""value=" 女 "
onChange={(ev) => this.setState({sex: ev.target.value})
} /> 女
<input type="radio" name="sex" id=""value=" 妖 "
onChange={(ev) => this.setState({sex: ev.target.value})
} /> 妖
</div>
)
}
}
export default Tables
受控复选框
import React, {Component} from 'react'
export class Tables extends Component {
// 模拟数据源
Datas = [{id:1,title:'HTML',isChecked:false},
{id:2,title:'JS',isChecked:true},
{id:3,title:'CSS',isChecked:false},
]
checks = (index,ev)=>{// console.log(ev.target.checked)
// console.log(index)
this.Datas[index].isChecked = ev.target.checked
}
render() {
return (
<div>
<h2> 复选框 </h2>
{this.Datas.map((data,index)=>{
return (<label key={data.id}>
{/* 使用 onChange 事件绑定,传递下标及事件对象,在处理函数中进行状态修改 */}
<input type="checkbox" defaultChecked={data.isChecked} onChange={(ev)=/>{this.checks(index,ev)}} /> {data.title}
</label>
)
})
}
<button onClick={()=>console.log(this.Datas)} > 展示多选框内容数据 </button>
</div>
)
}
}
export default Tables
在大多数情况下,我们推荐使用 受控表单 来处理表单数据。
在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控表单,这时表单数据将交由 DOM 节点来处理。
受控表单需要为每个状态更新都编写数据处理函数,而使用非受控表单,你可以使用 ref 来从 DOM 节点中获取表单数据。
import React, {Component} from 'react'
export class Tables extends Component {gets = ()=>{console.log(this.refs.users.value)
}
render() {
return (
<div>
<input type="text" ref='users'/>
<button onClick={()=>this.gets()}> 获取 </button>
</div>
)
}
}
export default Tables
但是,这样的用法会在浏览器中看到一个警告型的报错信息,原因也很简单,在新版的 React 中,默认启用了严格模式。
Warning: A string ref, "users", has been found within a strict mode tree.
我们需要在入口的 index.js 中,将严格模式的代码删除,如下:
ReactDOM.render(
<React.StrictMode>
<app></app>
</React.StrictMode>,
document.getElementById('root')
);
改完之后就是这个鬼样子了,错误提示就消失了:
ReactDOM.render(
<app></app>,
document.getElementById('root')
);
规范化写法
但是,这样的方式并不好,别问为什么,就是不好,我们建议使用下面的方式:
import React, {Component} from 'react'
export class Tables extends Component {constructor (){super()
this.myref = React.createRef()}
gets = ()=>{console.log(this.myref.current.value)
}
render() {
return (
<div>
<input type="text" ref={this.myref} />
<button onClick={()=>this.gets()}> 获取 </button>
</div>
)
}
}
export default Tables
规范化的方式依然是借助 ref 来实现,只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的,在获取时,直接调用生成的 ref 就可以了。
但是,需要注意,不论哪种方式,知道就行了,非受控表单,能不用就不要用,为啥啊? 不受控制的东西,你也敢往家里领?
又但是,正因为非受控表单将真实数据储存在 DOM 节点中,所以在使用非受控表单时,有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。
在应用页面中,与用户交互的基本都是在表单中呈现的。根据 React 框架的设计理念,对于表单的渲染工作,肯定由框架负责的,而表单数据的交互必然需要收到框架的控制和依赖,受控表单才是我们最应该使用的表单方式,但是非受控表单明显代码更多,非受控表单是为了在特殊情况下获取 Dom 而存在的,官方也不建议使用,即便非受控表单看起来更好用。
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)