React-Bootstrap中的Form.Control类型密码始终呈现一个我无法删除的默认密码

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 / value /和带有value的defaultValue。 但是仍然在密码输入中呈现了此默认数字。.上面是我的最新代码，尽管我使用onFocus破解了该代码，但仍然遇到了问题。 如果我的代码有更好的改进，请在下面也发表评论。 预先感谢所有评论者。 非常感谢这个社区的帮助。

以下是console.log（'渲染时输入的密码'，密码）的控制台日志。它显示react-bootstrap javascript正在清除密码并将其设置为0346：

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

因此得出结论，类型密码的defaultValue不起作用？

Answer 1

有价值的组件有两种类型（TextField，Checkbox等）：

1. 受控 -其值由代码实现控制的组件。 在这种类型的组件中，您必须使用值源设置组件的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 ，因为您需要一个受控组件来使其值持久化。

Answer 2

这里的props值太多，如果您放弃它，可以更改输入。 此外，您始终将字符串“ password”作为值提供给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 3

您对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>