我试图在简单的react应用程序中验证表单，但当我在input元素中键入内容并提交表单时，它会抛出错误，无法读取null值，当同一输入为空时，getElementById会返回该输入。。。我不知道出了什么问题，我是的新开发者
import styles from './RegisterForm.module.css'
import { Link } from 'react-router-dom'
const RegisterForm = () => {
const name = document.getElementById('name');
const surname = document.getElementById('surname');
const company = document.getElementById('company');
const address = document.getElementById('address');
const city = document.getElementById('city');
const state = document.getElementById('state');
const zip = document.getElementById('zip');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const confirm = document.getElementById('confirm');
const validation = e => {
e.preventDefault();
console.log(name);
if(name.value === '') {
name.className = styles.error;
name.focus();
}
}
return(
<div className ={styles.main}>
<div className className = {styles.subdiv}>
<div className = {styles.title}>First App</div>
<h1 className = {styles.welcome}>Welcome</h1>
<p className = {styles.createAccount}>Create your account</p>
<form id="myForm" type = "submit" className = {styles.form} onSubmit={validation}>
<input id="name" type="text" placeholder = "First name"/>
<input id="surname" type="text" placeholder = "Last name"/>
<input id="company" type="text" placeholder = "Company"/>
<input id="address" type="text" placeholder = "Address"/>
<input id="city" type="text" placeholder = "City"/>
<input id="state"type="text" placeholder = "State"/>
<input id="zip" type="text" placeholder = "Zip Code"/>
<input id="phone" type="number" placeholder = "Phone"/>
<input id="email" type="email" placeholder = "Email"/>
<input id="password" type="password" placeholder = "Enter your password"/>
<input id="confirm" type="password" placeholder = "Confirm your password"/>
<button className = {styles.button}>Register</button>
</form>
<div className = {styles.lastDiv}><p>Already have an account?</p><Link to="/"><a href="">Login!</a></Link></div>
</div>
</div>
)
}
export default RegisterForm;
尽管大多数情况下使用"；真实的"；必须避免使用dom，您可以在事件处理程序中获取元素。
备选方案：使用状态跟踪更改并在提交时对其进行验证(相关：Reactjs-表单输入验证(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style type="text/css">
.valid { background-color: white }
.invalid { background-color: red }
input { margin: .5rem }
span.valid { display: none }
span.invalid {
background-color: inherit;
color: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const ng_name = name => "" === name
class RegForm extends React.Component {
constructor(props){
super(props)
this.state = {
valid_name: true,
}
this.onsub = e => {
e.preventDefault()
const n = document.getElementById("name")
const ng = ng_name(n.value)
const ok = ! ng
this.setState({valid_name: ok})
}
}
render(){
const namecls = this.state.valid_name ? "valid" : "invalid"
const cls_name_invl = this.state.valid_name ? "valid" : "invalid"
return (<form id="frm" type="submit" onSubmit={this.onsub}>
<span>Name</span>
<input id="name" type="text" placeholder="First Name" className={namecls} />
<span className={cls_name_invl}>Invalid name</span>
<div><button>Register</button></div>
</form>)
}
}
const App = () => {
return (<div className="main">
<h1 className="title">First App</h1>
<h2 className="welcome">Welcome</h2>
<RegForm />
</div>)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
</body>
</html>