Question

我在下面有一个输入表单名称密码，我想在提交后清除它，并且密码不正确。我正在尝试e.target.password.value =''，下面也尝试了e.target.password.value.reset（），但是我收到一条错误消息，说reset不是函数。

onPasswordSubmit = (e) => {
    axios.get('/api/password/').then(response => {
      const password = response.data[0].password;
      ((password === this.state.password) ? this.setState(() => ({
        passwordVerified: true,
        error: ''
      })) : this.setState(() => ({
        error: 'Incorrect Password',
      })));
      (this.state.passwordVerified) ? (this.props.changeState()) :
        null
    })
  }
  render() {
    return (
      <div>
        <div className="row">
          <div className="input-field col s12">
        <form
          onSubmit={(e) => {
            e.preventDefault()
            this.onPasswordSubmit(e);
            e.target.password.value = ''

        }}>
              <input
                id="password"
                name="password"
                type="password"
                autoFocus
                value={this.state.password}
                onChange={this.onPasswordChange}
              />
              <label htmlFor="password" className='active'>Password</label>
              <br></br>
              <br></br>
              <br></br>
              <Button buttonLabel='Enter'/>


        </form>
      </div>
    </div>
      </div>

Answer 1

由于您输入的值来自state，因此您需要使用setState清除密码状态

请求成功完成后清除状态

onPasswordSubmit = (e) => {
    axios.get('/api/password/').then(response => {

      const password = response.data[0].password;
      ((password === this.state.password) ? this.setState(() => ({
        passwordVerified: true,
        error: '',
        password: '', //if success

      })) : this.setState(() => ({
        error: 'Incorrect Password',
        password: '', //if error

      })));
      (this.state.passwordVerified) ? (this.props.changeState()) :
        null
    })
  }

输入错误后如何清除输入字段

1 个答案: