Javascript 反应设定 类寄存器扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 用户：{ 电邮：“， 确认邮件：“ }, 匹配：正确 }; } handleChange=事件=>{ event.preventDefault（）； 这是我的国家({ 用户：{ …此.state.user， [event.target.name]：event.target.value } }); 常量值=event.target.value； 常量字段=event.target.name； 让我们比赛； 如果（字段==“电子邮件”）{ 匹配=值===this.state.user.confirmemail； }否则{ 匹配=值===this.state.user.email； } 设置超时（（）=>{ 这是我的国家({ 比赛 }); }, 5000); }; 渲染( 返回（{this.state.match&&this.state.match( 假的 ) : ( 电子邮件不匹配。 ))}

大家好， 我有两个输入，我试图添加setTimeout函数来给用户时间 要键入确认电子邮件，但在我键入确认电子邮件后也需要5秒钟来检查其匹配性。 那么，我如何才能改进这一点，使之更加实用呢？ 我想它后，我键入第一封电子邮件它需要时间之前，检查它，而我键入

---

直到我打字完毕才检查，如果我能在停止打字后加快检查速度。

你看起来像这样吗

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: {
                email: "",
                confirmemail: ""
            },
            match: true
        };
    }
    handleChange = event => {
        event.preventDefault();
        this.setState({
            user: {
                ...this.state.user,
                [event.target.name]: event.target.value
            }
        });
        const value = event.target.value;
        const field = event.target.name;
        let match;
        if (field === "email") {
            match = value === this.state.user.confirmemail;
        } else {
            match = value === this.state.user.email;
        }
        setTimeout(() => {

            this.setState({
                match
            });
        }, 5000);
    };
    render(
        return(<div>{this.state.match && this.state.match ? (
                                    false
                                ) : (
                                    <div
                                        style={{ color: "red" }}
                                        className="error"
                                    >
                                        Email Doesn't match.
                                    </div>))}

导出默认类App扩展React.Component{
状态={
匹配：false，
电邮：“，
杰梅尔：“
};
handleChange=e=>{
this.setState（{[e.target.name]：e.target.value}，（）=>{
如果(
this.state.email！==“”&&
this.state.cemail！==“”&&
this.state.email==this.state.cemail
) {
设置超时（（）=>{
this.setState（{matched:true}）；
}, 3000);
}
});
};
render（）{
const{email，cemail，matched}=this.state；
返回(


{匹配？“匹配您的电子邮件”：“”}
);
}
}

 export default class App extends React.Component {
  state = {
    matched: false,
    email: "",
    cemail: ""
  };
  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value }, () => {
      if (
        this.state.email !== "" &&
        this.state.cemail !== "" &&
        this.state.email === this.state.cemail
      ) {
        setTimeout(() => {
          this.setState({ matched: true });
        }, 3000);
      }
    });
  };
  render() {
    const { email, cemail, matched } = this.state;
    return (
      <div className="App">
        <input
          type="text"
          placeholder="Enter email"
          onChange={this.handleChange}
          name="email"
          value={email}
        />
        <br />
        <input
          type="text"
          placeholder="Confirm email"
          onChange={this.handleChange}
          name="cemail"
          value={cemail}
        />
        <h2>{matched ? "Matched your email" : ""}</h2>
      </div>
    );
  }
}

var timeout; // declare the timeout
class Register extends Component {
    ...
    handleChange = event => {
        if(timeout) clearTimeout(timeout) // clear the timeout when the user is still typing
        ...
        timeout = setTimeout(() => { 
            this.setState({
                match
            });
        }, 2000); // reduce the time to wait to 2s for better UX
    };
    render(...)
}