Пароль типа Form.Control в React-Bootstrap всегда отображает пароль по умолчанию, который я не могу удалить

Question

Я делаю страницу входа и понял, что не могу установить значения по умолчанию для ввода пароля типа Form.Control !!!

class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: 'thisIsMyDefaultPassword',
      isLoading: false,
      redirectToReferrer: false
    };
  }


  handleChange = name => event => {
    let update = {};
    update[`${name}`] = event.target.value;
    this.setState(update);
  }

  handleFocus = () => {
    this.setState({ password: '' });
  }

  handleSubmit = () => event => {
    let data = {
      email: this.state.email,
      password: this.state.password
    }
    this.props.login(data)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
    let { currentUser } = this.props;
    console.log('currentUser ', currentUser, 'prevProps.currentUser ', prevProps.currentUser );
    if (JSON.stringify(prevProps.currentUser) !== JSON.stringify(currentUser)) {
      console.log('currentUser !=');
      if (currentUser._id) {
        this.setState({
          redirectToReferrer: true
        })
      }
    }
  }

  render() {
    let { email, password , isLoading, redirectToReferrer } = this.state;
console.log('password when rendered', password);
    if (redirectToReferrer) {
        return <Redirect to={'/'} />;
    }

    return (
      <div className="loginWrapper">
        <div className="loginContainer">
          <Form>
            <Form.Group controlId="formGroupEmail">
              <Form.Label>Email Address</Form.Label>
              <Form.Control
                type="email"
                value={email}
                onChange={this.handleChange('email')}
                placeholder="Enter Email"
              />
            </Form.Group>
            <Form.Group controlId="formGroupPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control
                type="password"
                defaultValue={this.state.password}
                onFocus={this.handleFocus}
                onChange={this.handleChange('password')}
                placeholder="Password"
              />
            </Form.Group>
          </Form>
          <Button
            variant="primary"
            size="lg"
            disabled={isLoading}
            onClick={this.handleSubmit()}
            block
          >
            {isLoading ? 'Loading…' : 'LOGIN'}
          </Button>
        </div>
      </div>
    );
  }
}

Я ожидаю, что значения по умолчанию будут управляться по умолчаниюсостояние моего компонента.Но это просто не работает.Я пробовал defaultValue / значение / и defaultValue со значением.но по-прежнему этот номер по умолчанию отображается при вводе пароля. Выше приведены мои последние коды, но я все еще сталкиваюсь с проблемой, хотя взломаю ее с помощью onFocus.Если есть какие-то улучшения в моих кодах, пожалуйста, прокомментируйте ниже.Заранее спасибо всем комментаторам.очень ценю помощь этого сообщества.

Ниже приведены журналы консоли для console.log («пароль при рендеринге», пароль). Это показывает, что javascript response-bootstrap очищает пароль и устанавливает значение 0346:

password when rendered thisIsMyDefaultPassword
Login.js:51 password when rendered 
Login.js:51 password when rendered 0346

Таким образом, заключив, что defaultValue для пароля типа не работает?

Answer 1

Значение реквизита здесь слишком велико, если вы от него избавитесь, вы можете изменить ввод.Кроме того, вы всегда предоставляете строку «пароль» вашему обработчику onChange в качестве значения.Возможно, это не то, что вы хотите сделать, но вместо этого используйте действительный пароль, который вводит пользователь.

В вашем методе рендеринга:

<p>Current password: {this.state.password}</p>
<Form>
  <Form.Group controlId="formGroupPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      defaultValue={this.state.password}
      onChange={this.handleChange('password')}
      placeholder="Password"
    />
  </Form.Group>
</Form>

И ваша функция handleChange может выглядеть так:

handleChange = name => event => {
  this.setState({ password: event.target.value });
};

Пример: https://codesandbox.io/s/8x8zw28nv2

Answer 2

У вас есть одинаковое значение для defaultValue и value, кажется, что это не имеет смысла, потому что, если value имеет значение, это значение будет отображено.Попробуйте сопоставить defaultValue с другим значением или просто удалите defaultValue.Ваш onChange работает?Похоже, нет.Вы реализовали свой handleChange?Потому что вы используете контролируемые входы.Попробуйте это:

  handleChange = e => {
    this.setState({
        password: e.target.value
    })
  }

  <Form>
    <Form.Group controlId="formGroupPassword">
      <Form.Label>Password</Form.Label>
      <Form.Control
            type="password"
            value={password}
            onChange={this.handleChange}
            placeholder="Password"
       />
    </Form.Group>
  </Form>

Answer 3

Существует два типа оцениваемых компонентов (TextField, Checkbox и т. Д.):

1. Controlled - Компонент, значение которого контролируется реализацией кода.В компоненте этого типа вы должны установить value prop компонента с источником значения и обработать его onChange, чтобы получить значение и обновить его в будущем источнике.

   <TextField value={this.state.password} onChange={(event) => this.setState({ password: event.target.value })} />

2. Неуправляемый - Компонент, который имеет значение по умолчанию и это значение может быть изменено без какого-либо запуска / обработки вкод компонента.Эти компоненты имеют реквизит defaultValue, заполненный начальным значением, которое вы хотите присвоить.

   <TextField defaultValue={this.state.password} />

Вы не можете использоватьvalue и defaultValue на одном и том же компоненте.

В вашем случае вы должны удалить defaultValue prop, так как вам нужен контролируемый компонент, чтобы сохранить его значение.