Return 不同 <Input> 表单中使用切换到 return 输入

Question

我正在尝试实现一个表单，首先您会看到 2，然后当您单击一个按钮时，您会看到其他输入。我正在使用一个开关，其中基于我 return 前 2 个或其他值的值。我已经尝试 returning only the , returning a form with inputs 但一切都给了我同样的问题。在我填写前两个文本输入后，当我切换到其他输入时，这些输入的前两个具有前两个输入的值。

感谢您的帮助。

这里有基本版的代码

function renderSwitch() {
  switch (currentPhase) {
    case 0:
      return (
        <div>
          <input name='email' type='email' placeholder='Inserisci email' />
        </div>
      );
      break;

    case 1:
      return (
        <div>
          <input
            name='surname'
            type='text'
            placeholder='Inserisci Cognome...'
          />
        </div>
      );
      break;
  }

  return (
    <div
      className='registerpage'
      style={{ height: '100vh', backgroundColor: 'white' }}
    >
      <div className='formdiv'>
        <form onSubmit={handleSubmit}>
          {renderSwitch()}

          {currentPhase < 1 && (
            <button onClick={() => nextPhase()}>Next</button>
          )}
          {currentPhase > 0 && (
            <button onClick={() => previousPhase()}>Back</button>
          )}
          <br />
          <button type='submit'>Iscriviti</button>
        </form>
      </div>
    </div>
  );
}

Answer 1

您应该使用状态存储输入值：

const [email, setEmail] = useState('')
const [surname, setSurname] = useState('')

function renderSwitch() {
    switch (currentPhase) {
      case 0:
        return (
          <div>
            <input value={email} name='email' type='email' placeholder='Inserisci email' />
          </div>
        );
        break;
  
      case 1:
        return (
          <div>
            <input
            value={surname}
              name='surname'
              type='text'
              placeholder='Inserisci Cognome...'
            />
          </div>
        );
        break;
    }
}

然后在您提交数据后重置它们：

function handleSubmit(e) {
    e.preventDefault()
    // Handler your data...

    setEmail('')
    setSurname('')
}

Return 不同 <Input> 表单中使用切换到 return 输入

Return different <Input> in a form using a switch to return the Input

html

javascript

forms

input

reactjs