Question

我正在尝试比较2个表单组件值，如密码和确认密码，但它会产生一些问题。

还建议我使用提示消息或任何新方式显示消息，用户也会收到一些交互式消息。

当我在inputData函数中输入警告消息时，它总是弹出，当我保持在submitData函数时，它甚至都没有检查它。

这是我的代码：

 import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      password: '',
      c_password: '',
      isDone:false
    };
    this.inputData = this.inputData.bind(this);
    this.submitData = this.submitData.bind(this);
  }
  inputData(event)
  {
    if(this.state.password==this.state.c_password)
    {
      this.setState({
        [event.target.name]:event.target.value,
        isDone:true
      });
    }
    else if(this.state.password!=this.state.c_password)
    {
        this.setState({
          isDone:false
        });
    }
  }
  submitData(event)
  {
    if(this.state.isDone==false)
    {
      alert("Passwords don't match")
    }
    else if(this.state.isDone==true)
    {
      alert("Passwords matched");
    }
    event.preventDefault();
  }
  render(){
    return(
      <div>
        <form onSubmit={this.submitData}>
          Password:
          <input type="password" name="password" onChange={this.inputData}/>
          <input type="password" name="c_password" onChange={this.inputData}/>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}
export default App;

当我执行它时，即使我在两个字段中都写了相同的密码，总是显示不匹配...！

Answer 1

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      password: "",
      c_password: "",
    };

    this.submitData = this.submitData.bind(this);
  }
  inputPassword = event => {
    this.setState({ password: event.target.value });
  };

  confirmPassword = event => {
    this.setState({ c_password: event.target.value });
  };
  submitData(event) {
    event.preventDefault();
    const { password, c_password } = this.state;
    const matches = password === c_password;
    matches ? alert("MATCHED") : alert("NO MATCH");  
  }
  render() {
    return (
      <div>
        <form onSubmit={this.submitData}>
          Password:
          <input
            type="password"
            name="password"
            onChange={this.inputPassword}
          />
          <input
            type="password"
            name="c_password"
            onChange={this.confirmPassword}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}
export default App;

render(<App />, document.getElementById("root"));

如果你想用一个功能来做声明byPropKey

 const byPropKey = (propertyName, value) => () => ({
  [propertyName]: value,
});

现在以你想要的方式使用它。

<input value={this.state.password} onChange={event=> this.setState(byPropKey('password', event.target.value))} type="password" placeholder="Password" />
<input value={this.state.c_password} onChange={event=> this.setState(byPropKey('c_password', event.target.value))}

Answer 2

上述答案可行，但我们可以在一个功能中完成整个事情。此外，我们可以将此功能用于许多其他领域。在状态中将isDone = false初始化为默认值。然后回答上面的问题是这样的：

inputData(event) {
const field = event.target.name

this.setState({
  [field]: event.target.value
})

if (this.state.password === this.state.c_password) {
 this.setState({
  isDone: true
 })
}

提示： 1）您可以在处理程序中使用() => this.submitData()之类的匿名函数，这样您就不需要在构造函数中将处理函数与this绑定，因为此匿名函数会保留this。 2）为了有效地使用表单，您可以使用两个流行的库redux-form和react-form

这将有助于您获得良好的错误并清除代码。

比较onSubmit或更改期间反应组件中的表单值？

2 个答案: