我有一個登錄表單作業正常，我想在單擊提交后將輸入欄位設定為空白。我搜索了類似的問題，但大多數人都在使用 react hook 和其他我沒有使用的東西，所以我不知道如何使這些解決方案適應我的。這是我的代碼：
import React, { useState } from 'react';
import {
FormWrap,
Container,
Icon,
FormContent,
Form,
FormH1,
FormLabel,
FormInput,
Text,
FormButton,
TextLeft,
Heading,
Subtitle,
TextWrapper,
LogoPage,
ModalWrapper,
FormMiniLabel, Wrapper, FormInputTerms, TermLink, FormMiniLabelWarning}
from './SignInElements'
import Axios from 'axios'
import { Modal} from '../Modal/Modal';
const SignIn = ({}) => {
const[name, setname] = useState("");
const[cpf, setcpf] = useState("");
const[tel, settel] = useState("");
const[email, setemail] = useState("");
const[terms, setterms] = useState("");
const register = () => {
Axios.post('http://localhost:3001/register/', {
name: name,
cpf: cpf,
tel: tel,
email: email,
}).then((response) => {console.log(response)});
console.log(name);
console.log(cpf);
console.log(tel);
console.log(email);
console.log(terms);
};
const [showModal, setShowModal] = useState(false);
const OpenModal = () => {
setShowModal(prev => !prev);
};
function AllFunc() {
register();
OpenModal();
}
function SubmitButton(){
if (name && cpf && tel && email && terms){
return <FormButton type="submit" onClick={AllFunc}>Cadastrar</FormButton>
} else {
return (
<FormButton type="submit">Cadastrar</FormButton>)
};
};
return (
<>
<Container>
<FormWrap>
<FormContent>
<TextLeft action="#">
<Icon to="/"> <LogoPage src={require('../../images/Brand.svg').default} /> </Icon>
<TextWrapper>
<Heading>Bora parcelar com a Wowpen? </Heading>
<Subtitle>Cadastre-se completando o formulário e participe do nosso grupo seleto de beta testers. Tenha acesso antecipado a funcionalidade de parcelamento e interaja diretamente com o nosso time de desenvolvimento.</Subtitle>
</TextWrapper>
</TextLeft>
<Form action="#">
<FormLabel htmlFor="for">Como podemos te chamar?</FormLabel>
<FormInput placeholder="Nome Sobrenome" type="text" required onChange={(e) => setname(e.target.value) }/>
<FormLabel htmlFor="for">Compartilha seu CPF?</FormLabel>
<FormMiniLabel>é importante para verificar sua identidade.</FormMiniLabel>
<FormInput placeholder="000.000.000-00" type="text" required onChange={(e) => setcpf(e.target.value) }/>
<FormLabel htmlFor="for">Qual seu número de Whatsapp?</FormLabel>
<FormMiniLabel>Esse é nosso principal meio de comunia??o.</FormMiniLabel>
<FormInput placeholder="(DDD) 90000-0000" type="text" required onChange={(e) => settel(e.target.value) } />
<FormLabel htmlFor="for">E seu e-mail?</FormLabel>
<FormMiniLabel>Prometemos n?o enviar spam ;)</FormMiniLabel>
<FormInput placeholder="[email protected]" type="email" required onChange={(e) => setemail(e.target.value) } />
<Wrapper>
<FormInputTerms type="checkbox" required onChange={(e) => setterms(e.target.value) } />
<FormMiniLabel>Li e concordo com os <TermLink>Termos e a Política de Privacidade</TermLink> da Wowpen. </FormMiniLabel>
</Wrapper>
<SubmitButton/>
</Form>
<Modal setShowModal={setShowModal} showModal={showModal}/>
</FormContent>
</FormWrap>
</Container>
</>
)
}
export default SignIn
基本上，有一個 SubmitButton 函式，當所有欄位都填滿時，它會觸發為 MySQL 資料庫（注冊）發送資料并打開一個模式 (openModal) 的函式。我試圖添加一個名為 reset 的函式，如：
function reset () {
setname("");
settel("");
}
要在提交按鈕上呼叫單擊，但無法將欄位設為空白。
表單組件如下（我正在使用樣式組件）：
export const Form = styled.form`
background: #fff;
background-image: url(${img});
background-size: 100% 100%;
background-position:center;
background-repeat:no-repeat;
max-width: 100%;
height: 100%;
width: 100%;
display: grid;
grid-area: col2;
padding: 80px 147px;
align-content: center;
@media screen and (max-width: 480px) {
padding: 32px 32px;
}
@media screen and (max-width: 700px) {
padding: 80px 60px;
height: 1200px;
width: 100%;
justify-content: center;
background-size: cover;
}
@media only screen and (min-width: 1500px) and (max-width: 1501px) {
height: 1200px;
width: 100%;
padding: 0;
justify-content: center;
}
`;
和表單輸入組件（也帶有樣式組件）：
export const FormInput = styled.input`
padding: 16px 16px;
/*margin-bottom: 32px;*/
border: none;
height: 56px;
border-radius: 4px;
font-size: 18px;
background-color: #F6F6F6;
margin-bottom: 24px;
`;
有誰知道提交后如何將輸入欄位設定為空白？
uj5u.com熱心網友回復：
我已將所有輸入更改為受控輸入，因此每當您的狀態發生變化時，它都會自動反映在您的輸入框中，也會為所有 FromInputs 添加值
<FormInput value={name} ...
所以在更改為受控元素后，您現在可以通過清除狀態來清除文本框值
import React, { useState } from 'react';
import {
FormWrap,
Container,
Icon,
FormContent,
Form,
FormH1,
FormLabel,
FormInput,
Text,
FormButton,
TextLeft,
Heading,
Subtitle,
TextWrapper,
LogoPage,
ModalWrapper,
FormMiniLabel, Wrapper, FormInputTerms, TermLink, FormMiniLabelWarning}
from './SignInElements'
import Axios from 'axios'
import { Modal} from '../Modal/Modal';
const SignIn = ({}) => {
const[name, setname] = useState("");
const[cpf, setcpf] = useState("");
const[tel, settel] = useState("");
const[email, setemail] = useState("");
const[terms, setterms] = useState("");
const register = () => {
Axios.post('http://localhost:3001/register/', {
name: name,
cpf: cpf,
tel: tel,
email: email,
}).then((response) => {
console.log(response)
setname("");
settel("");
setcpf("");
setemail("");
setterms(false)
});
};
const [showModal, setShowModal] = useState(false);
const OpenModal = () => {
setShowModal(prev => !prev);
};
function AllFunc() {
register();
OpenModal();
}
function SubmitButton(){
if (name && cpf && tel && email && terms){
return <FormButton type="submit" onClick={AllFunc}>Cadastrar</FormButton>
} else {
return (
<FormButton type="submit">Cadastrar</FormButton>)
};
};
return (
<>
<Container>
<FormWrap>
<FormContent>
<TextLeft action="#">
<Icon to="/"> <LogoPage src={require('../../images/Brand.svg').default} /> </Icon>
<TextWrapper>
<Heading>Bora parcelar com a Wowpen? </Heading>
<Subtitle>Cadastre-se completando o formulário e participe do nosso grupo seleto de beta testers. Tenha acesso antecipado a funcionalidade de parcelamento e interaja diretamente com o nosso time de desenvolvimento.</Subtitle>
</TextWrapper>
</TextLeft>
<Form action="#">
<FormLabel htmlFor="for">Como podemos te chamar?</FormLabel>
<FormInput value={name} placeholder="Nome Sobrenome" type="text" required onChange={(e) => setname(e.target.value) }/>
<FormLabel htmlFor="for">Compartilha seu CPF?</FormLabel>
<FormMiniLabel>é importante para verificar sua identidade.</FormMiniLabel>
<FormInput value={cpf} placeholder="000.000.000-00" type="text" required onChange={(e) => setcpf(e.target.value) }/>
<FormLabel htmlFor="for">Qual seu número de Whatsapp?</FormLabel>
<FormMiniLabel>Esse é nosso principal meio de comunia??o.</FormMiniLabel>
<FormInput value={tel} placeholder="(DDD) 90000-0000" type="text" required onChange={(e) => settel(e.target.value) } />
<FormLabel htmlFor="for">E seu e-mail?</FormLabel>
<FormMiniLabel>Prometemos n?o enviar spam ;)</FormMiniLabel>
<FormInput value={email} placeholder="[email protected]" type="email" required onChange={(e) => setemail(e.target.value) } />
<Wrapper>
<FormInputTerms checked={terms} type="checkbox" required onChange={(e) => setterms(e.target.checked) } />
<FormMiniLabel>Li e concordo com os <TermLink>Termos e a Política de Privacidade</TermLink> da Wowpen. </FormMiniLabel>
</Wrapper>
<SubmitButton/>
</Form>
<Modal setShowModal={setShowModal} showModal={showModal}/>
</FormContent>
</FormWrap>
</Container>
</>
)
}
export default SignIn
除了這種方法，我建議使用單個狀態物件來處理所有值，例如const [data, setData] = useState({})通過使用這種方法，您可以處理一個物件中的所有值，并且可以快速清除它
uj5u.com熱心網友回復：
你需要添加onSubmit到Form標簽
<Form action="#" onSubmit={onSubmit}>
然后創建一個應在單擊提交按鈕后執行的功能
const onSubmit = e => {
e.preventDefault()
// do something
setname("");
settel("");
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/337239.html
標籤：反应
上一篇：為新手創建反應函式