Как правильно заполнить ввод значением = ""?

Question

Когда я помещаю значение = "" во вход, это не позволяет мне вводить имя пользователя и пароль.

Без значения = "" это позволяет мне заполнить, со значением = "" ничего не происходит

{/* User */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-user"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="username" value={this.state.name} onChange={this.handleChange}></input>
</div>
{/* Senha */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-key"></i></span>
   </div>
   <input type="password" class="form-control" placeholder="password" value={this.state.password} onChange={this.handleChange}></input>
</div>

В поле ввода необходимо указать имя пользователя и пароль.

Answer 1

Попробуйте использовать «defaultValue» вместо «value», похожее на: Тип ввода реакции не редактируется

{/* User */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-user"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="username" defaultValue={this.state.name} onChange={this.handleChange}></input>
</div>
{/* Senha */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-key"></i></span>
   </div>
   <input type="password" class="form-control" placeholder="password" defaultValue={this.state.password} onChange={this.handleChange}></input>
</div>