react中的表单不同于基本的dom操作 他主要可分为 受控组件和非受控组件
这里我们先创建一个react项目
这里我们就直接将代码写在App.jsx里了
App.jsx参考代码如下
import './App.css';
import React from "react";
class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div className="App">
<form></form>
</div>
)
}
}
export default App;
这里我们建立一个基本的组件 写了一个空的form表单
然后我们可以在form标签上绑定一个事件
<form onSubmit = {
this.submit }>
</form>
react的 onSubmit是一个监听事件 当表单提交时就会触发
然后这个submit 方法我们可以自己写一下
submit(){
}
这里我就简答定义一下这个方法 内容后面再写
然后我们在state中定义一个叫value 的空字符串
this.state = {
value: ""
}
然后我们在form表单中写一个input输入框
<input type = "text" value = {
this.state.value }></input>
可以看到 我们这个输入框关联了this.state下的value值 这样这个输入框就被我们的value管理了 value会和输入框的内容保持一致
这就是一种受控组件
但光这样写肯定是不行的
我们输入不了内容 而且会报错 意思就是少一个onChange事件来帮我们处理这个数据
我们将input的代码改一下
<input type = "text" onChange = {
this.setValue } value = {
this.state.value }></input>
这里绑定了 onChange 事件 然后这里我们定义的方法名叫 setValue 这个你们可以根据自己的情况给方法命名
setValue参考代码如下
setValue = (event)=>{
this.setState({
value: event.target.value
})
}
这样在输入 这两个变量就同步了
内容就可以正常输入了
我们可以来测一下这个变量有没有和输入框同步
我们在form中定义一个提交按钮
<button type = "submit">提交</button>
现在点这个按钮表单就会提交
那么我们开始时 说过 form上绑定的onSubmit事件就是用来监听表单提交的
我们给他绑定了一个 submit 方法
现在我们来写一下submit 方法的内容
submit = ()=>{
console.log(this.state.value);
}
然后我们在表单提交的方法中打印了绑定input的state.value
但我们运行之后会出现点击提交 一闪而过的问题
这是因为表单提交界面会跳转一下
我们将submit的代码改成
submit = (event)=>{
event.preventDefault();
console.log(this.state.value);
}
这就是一个js基础了 表单的提交事件接受一个event 调用event中的preventDefault就可以阻止表单的默认行为 他就不会乱跳了
然后我们再在输入框中输入一些内容
然后点击提交
这时我们就会发现 输出在控制台上的this.state.value 和我们输入框的内容是同步的
当然 大家可以设想一种情况 如果我们有好多的表单元素 他妈的值都需要控制 难道每一个都写一个onChange 吗？
不是我说 我都觉得麻烦
所以官方给我提供了第二种 非受控组件
我们在constructor中定义几个虚拟元素控制
参开代码如下
constructor(props){
super(props);
this.userName = React.createRef()
this.password = React.createRef()
this.number = React.createRef()
this.state = {
value: ""
}
}
然后我们改写form代码
<form onSubmit = {
this.submit }>
<input type = "text" onChange = {
this.setValue } value = {
this.state.value }></input>
<input type = "text" ref = {
this.userName }></input>
<input type = "password" ref = {
this.password }></input>
<input type = "text" ref = {
this.number }></input>
<button type = "submit">提交</button>
</form>
这时 我们新增加了三个输入框 分别绑定了 userName password number 元素
然后我们改一下一下提交监听的submit方法
submit = (event)=>{
event.preventDefault();
console.log(this.userName.current);
console.log(this.password.current);
console.log(this.number.current);
}
然后我们点击提交
可以看到 他打印的是这三个元素本身 那如果我们想要用户输入的值呢？
console.log(this.userName.current.value);
console.log(this.password.current.value);
console.log(this.number.current.value);
直接在元素后面.value就好啦
当然 一般情况建议大家还是用受控组件 除非真的是我好多输入框 写一大堆事件看着好乱 就用非受控组件