我有简单的形式
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const mySubmitForm = event => {
event.preventDefault();
const form = event.target;
form.firstName.classList.add("red");
console.log("This is first name value", (form.firstName.className = "red"));
console.log("This is last name value", form.lastName);
console.log("This is email value", form.email);
console.log("This is password", form.password);
};
const App = (props) => {
return (
<div className="App">
<form onSubmit={mySubmitForm}>
<fieldset>
<legend>Форма регистрации</legend>
Your name:{" "}
<input
className={this.state.isChangeClass ? "red" : ""}
type="text"
name="firstName"
/>
Your last name: <input type="text" name="lastName" />
Your email: <input type="text" name="email" />
Your password: <input type="password" name="password" />
<input type="submit" value="Send" />
</fieldset>
</form>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
有时对我来说不需要受控的输入表单,尤其是当我有很多字段时,我可以使用这种方法发送没有 refs 和 state(onChange) 的表单,这是优化我的 React 应用程序的正常做法吗?
是的你可以。它是一种完全有效的语法,只要任何更改都不需要重新渲染,您就可以使用它。(就像一个字段是否具有依赖性并更新或阻止任何操作,例如在字段值更改或模糊时显示错误消息)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句