Reactjs React引导中的Form.Control-type password始终呈现一个默认密码，我可以'；移开

我正在做登录页面，我意识到我不能设置表单的默认值。控件类型密码输入

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>
    );
  }
}

---

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

有两种类型的有值组件（文本字段、复选框等）：

受控的-其值由代码实现控制的组件。在这种类型的组件中，您必须使用值源设置组件的

value

prop，并处理它的

onChange

，以获取值并在将来的源中更新

this.setState（{password:event.target.value}）
/>

非受控的-具有默认值且该值可以更改的组件，无需在组件代码中进行任何触发/处理。这些组件的道具“defaultValue”中填充了要指定的初始值

不能在同一组件上同时使用

value

和

defaultValue

。

---

在您的情况下，您必须删除

defaultValue

prop，因为您需要一个受控组件来保持其值。

有两种类型的有值组件（文本字段、复选框等）：

受控的-其值由代码实现控制的组件。在这种类型的组件中，您必须使用值源设置组件的

value

prop，并处理它的

onChange

，以获取值并在将来的源中更新

this.setState（{password:event.target.value}）
/>

非受控的-具有默认值且该值可以更改的组件，无需在组件代码中进行任何触发/处理。这些组件的道具“defaultValue”中填充了要指定的初始值

不能在同一组件上同时使用

value

和

defaultValue

。

---

在您的情况下，您必须删除

defaultValue

prop，因为您需要一个受控组件来保持其值。

这里的值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>

---

示例：

这里的值道具太多了，如果去掉它，可以更改输入。 此外，您总是将字符串“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>

---

示例：

您对

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>

handleChange=e=>{
这是我的国家({
密码：e.target.value
})
}
密码

对于

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>

handleChange=e=>{
这是我的国家({
密码：e.target.value
})
}
密码

我的更改确实有效，但我应该编辑我的代码，因为它不是我使用的。。嗯，我尝试了所有组合defaultValue/value/defaultValue和Valuemy，但我应该编辑我的代码，因为它不是我使用的。。嗯，我尝试了defaultValue/value/defaultValue和value this的所有组合。状态={email:''，密码：''，isLoading:false，redirectToReferrer:false}；但渲染时仍有默认密码=[我分别尝试了所有组合，并同时尝试了这两种组合。请删除密码上的onFocus，然后重试！this.state={email:''，password:''，isLoading:false，redirectToReferrer:false}；但呈现时仍有默认密码=[我分别尝试了所有组合，并同时尝试了所有组合。删除密码上的onFocus，然后重试！嘿，伙计，我的代码与你的代码完全相同，只是我在构造函数中声明了状态。我尝试了你的方法，只是在类中将状态声明为变量，但对我不起作用。这里有一个提示：尝试使用Console记录密码e、 这将帮助您了解问题所在。我将在handleChange函数（查看您是否在那里获得正确的值）和render函数中添加console.log。特别是我将只执行console.log（This.state）为了查看保存内容的位置。嗨，grenzbotin，我在render函数上做了一个控制台日志，它正确地显示了我在字段中输入的任何内容，尽管我声明了一个默认值作为状态密码，但bootstrap jsut会覆盖它。我将更新我在帖子中找到的日志。@grenzbotin在哪里覆盖？你能更新你的代码吗在第一篇文章中，我们知道哪一行在控制台中输出哪一条日志？我真的不明白你的问题是什么：因此，状态得到了正确的更新（你在日志中看到了）。但是接下来会发生什么，应该发生什么