Reactjs：提交后如何清除文本字段

Question

我有一个注册页面，其中有 4 个输入文本字段，可将每个字段的 currentState 从空字符串更改为我输入的任何内容。注册后，它会使用 post 请求将以下 4 个字段中的每一个输入记录到数据库中。单击注册按钮后如何清除每个字段。基本上我只想在点击后清除页面。我试图在承诺链的末尾将 4 个变量的状态设置回空字符串，但仍然没有任何变化。

import React,{useState} from 'react';
import style from './Signup.css';
import Axios from 'axios';

function Signup() {
  
  const [firstReg, setFirstNameReg] = useState('')
  const [lastReg, setLastNameReg] = useState('')
  const [emailReg, setEmailReg] = useState('')
  const [passReg, setPassReg] = useState('')

  const register = () => {
    Axios.post('http://localhost:3001/register', {
      first_name: firstReg,
      last_name: lastReg,
      email: emailReg,
      password: passReg,
    }).then((response)=> {
      console.log(response);
      setFirstNameReg('')
    });
  };

  return (
    <div className="Signup">    
      <div className='Sign'>
      <div class="photo"> Create an account</div>
        <div class ='searche'>
          <div className="searchInputse">
                    <input type="text" onChange={(e)=> {setFirstNameReg(e.target.value)}} placeholder={'First name'} />
                    <div className="searchIcone"></div>
                </div>
                <div className="dataResult"></div>
        </div>
        <div class ='searche'>
          <div className="searchInputse">
                    <input type="text" onChange={(e)=> {setLastNameReg(e.target.value)}} placeholder={'Last name'}/>
                    <div className="searchIcone"></div>
                </div>
                <div className="dataResult"></div>
        </div>
        <div class ='searche'>
          <div className="searchInputse">
                    <input type="text" onChange={(e)=> {setEmailReg(e.target.value)}} placeholder={'Email'}/>
                    <div className="searchIcone"></div>
                </div>
                <div className="dataResult"></div>
        </div>
        <div class ='searche'>
          <div className="searchInputse">
                    <input type="text" onChange={(e)=> {setPassReg(e.target.value)}} placeholder={'Password'}/>
                    <div className="searchIcone"></div>
                </div>
                <div className="dataResult"></div>
        </div>
        <button className='searchee' onClick={register}>
          Sign Up
        </button>
      </div>
    </div>

  );
}

export default Signup;

Answer 1

您好尝试用这个替换您的注册按钮：

<button className='searchee' onClick={()=>{register();setFirstNameReg('');setLastNameReg('');setEmailReg('');setPassReg('')}}>
  Sign Up
</button>

Answer 2

您应该注意的几件事。

第一。您希望将数据保存在一个对象中以便于管理和减少代码，如下所示：

在您的组件之外定义初始对象；

let initialValues = {
  'first_name': '',
  'last_name': '',
  'email': '',
}

并在您的组件中使用 initialValues 变量定义状态作为状态默认值。

const [data, setData] = useState(initialValues);

然后，在您的 JSX 中，您可以像这样将值与对象键连接起来：

<input type="text" name="first_name" value={data.first_name} />
<input type="text" name="last_name" value={data.last_name} />
<input type="text" name="email" value={data.email} />

然后您还可以向该输入添加一个 onChange 处理程序，如下所示： note: 名称必须与 initalValues 对象中的键匹配。

<input type="text" name="first_name" value={data.first_name} onChange={handleChange} />
<input type="text" name="last_name" value={data.last_name} onChange={handleChange} />
<input type="text" name="email" value={data.email} onChange={handleChange} />

handleChange 基本函数如下所示：

const onChange = (e) => {
  setData({...data, [e.target.name]: e.target.value})
}

基本上你所做的就是在输入字段中输入，onChange 检测每次按键的变化，并触发 handleChange 函数，该函数复制当前的data 的状态然后查看可能是 first_name 的 e.target.name 并将其设置为 e.target.value，这是您键入的任何内容。

这样，您只需要传递给 axios 的数据对象即可。

希望对您有所帮助，如果您有任何其他问题，请告诉我。

编码愉快！

Reactjs：提交后如何清除文本字段

Reactjs: How to clear text field after submission

backend

reactjs