Question

我目前正在尝试使用 ReactJS 更改输入字段的值，但出现了一些问题。我无法在输入字段中输入值。

我已经阅读了其他几个问题，我只需要将输入字段的值更改为state元素，但我想我还是在做错什么。

我已经删除了 handleLogin 功能以节省更多空间，我只是认为它不起作用，因为它已经在工作。

父组件：

        if (reader["Client"] != DBNull.Value)
        {
            obj.Client = (string)reader["Client"];
        }

        if (reader["PolicyNo"] != DBNull.Value)
        {
            obj.PolicyNo = (string)reader["PolicyNo"];
        }
        else
        {
            return null;
        }

        if (reader["PolicyType"] != DBNull.Value)
        {
            obj.PolicyType = (short)reader["PolicyType"];
        }

我仅在我的 NewPasswordForm 组件中遇到此问题：

 class LoginPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
       isInvalidForm: null,
       isFirstLogin: false,
       user: null,
       email: '',
       password: '',
       newPassword: '',
       userAttr: null
     }
     this.handleLogin = this.handleLogin.bind(this);
     this.changePassword = this.changePassword.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
    changePassword = (event) => {
     event.preventDefault();
     const cognitoUser = this.state.user;
     const userAttr = this.state.userAttr;
     const newPassword = this.state.newPassword;
     cognitoUser.completeNewPasswordChallenge(newPassword, userAttr, {
     onSuccess: (result) => {
     console.log("NEW PASSWORD COMPLETED: ");
     console.log(result);
    },
    onFailure: (err) => {
     console.log(err);
    }
  });
}

handleChange = event => {
 event.preventDefault();
 const { name, value } = event.target;
 this.setState({ [name]: value });
};



     render() {
    return (
      <div>
        {this.state.isFirstLogin ? (
          <NewPassswordForm changePassword={this.changePassword} handleChange={this.handleChange} newPassword={this.state.newPassword} />
        ) : (
            <LoginForm handleLogin={this.handleLogin} handleChange={this.handleChange} email={this.state.email} password={this.state.password} />
          )}
      </div>
    );
  }

}

Answer 1

name和value不匹配。将name="password2"更改为name="newPassword"

Answer 2

class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isInvalidForm: null,
      isFirstLogin: false,
      user: null,
      email: '',
      password: '',
      newPassword: '',
      userAttr: null
    }

  }
   changePassword = (event) => {
    event.preventDefault();
    const cognitoUser = this.state.user;
    const userAttr = this.state.userAttr;
    const newPassword = this.state.newPassword;
    cognitoUser.completeNewPasswordChallenge(newPassword, userAttr, {
    onSuccess: (result) => {
    console.log("NEW PASSWORD COMPLETED: ");
    console.log(result);
   },
   onFailure: (err) => {
    console.log(err);
   }
 });
}

handleChange = evt => {
const value = evt.target.value;
  this.setState({
    [evt.target.name]: value
  });
};



    render() {
   return (
     <div>

         <NewPasswordForm 
         changePassword={this.changePassword}
          handleChange={this.handleChange} 
         newPassword={this.state.newPassword}
         password={this.state.password} />

     </div>
   );
 }

}

更改后

class NewPasswordForm extends React.Component {
  render() {
      return (
          <div>
              <h3> Confirm new Password</h3>
              <form onSubmit={this.props.changePassword}>
                  <div className="form-group">
                      <label htmlFor="exampleInputPassword2">Password</label>
                      <input
                          type="password" 
                          name="password"
                          value={this.props.password}
                          onChange={this.props.handleChange}
                          className="form-control"
                          id="exampleInputPassword1"
                          placeholder="Password"
                      />
                      <input
                          type="password" 
                          name="newPassword"
                          value={this.props.newPassword}
                          onChange={this.props.handleChange}
                          className="form-control"
                          id="exampleInputPassword2"
                          placeholder="New Password"
                      />
                  </div>
                  <button type="submit" className="btn btn-primary">
                      Submit
                  </button>
              </form>
          </div>
      )
  }
}

无法使用ReactJS在输入字段中输入文本值

2 个答案: