代码之家 › 专栏 › 技术社区 › Webwoman

React-还有另一种方法来处理更新的状态,而不是在setState方法的回调部分对所有函数进行硬编码?

node.js javascript

Webwoman · 技术社区 · 6 年前

但这不起作用:

我的代码无法更新值,
更新状态中有一些延迟,而不是立即更新
null 作为论据而不是 e

所以我把所有的代码都硬编码在回调区域。现在可以了。但我仍然想知道如何以更精细的方式处理新状态,而不是在回调部分硬编码所有函数。

这是我的 handleChange 功能:

handleChange = (e) => {
  e.preventDefault();
  console.log("state in checkForm: ", this.state);

  if (e.target.name === "email") {
    let emailValue = e.target.value.trim()
    if (
      typeof(emailValue) === 'string' &&
      emailValue.length >= 1 &&
      validator.isEmail(emailValue)
    ) {
      this.setState({
          [e.target.name]: Object.assign({},
            this.state[e.target.name], {
              validation: true
            }, {
              value: e.target.value
            })
        },
        () => {
          let validatePassword = this.state.password.validation;
          let validateEmail = this.state.email.validation;
          if (validateEmail && validatePassword) {
            this.setState({
              validateForm: true,
              nameSubmit: "onSubmit"
            });
            console.log("state email: ", this.state)
          }
        }
      );
    } else {
      this.setState({
        [e.target.name]: Object.assign({},
          this.state[e.target.name], {
            validation: false
          })
      });
      this.setState({
        nameSubmit: "offSubmit",
        validateForm: false
      });
    }
  }

  if (e.target.name === "password") {
    let regexCheck = RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}");
    let password = e.target.value.trim()
    if (
      typeof(password) === 'string' &&
      password.length >= 1 &&
      regexCheck.test(password)
    ) {
      this.setState({
          [e.target.name]: Object.assign({},
            this.state[e.target.name], {
              validation: true
            }, {
              value: e.target.value
            })
        },
        () => {
          let validatePassword = this.state.password.validation;
          let validateEmail = this.state.email.validation;
          if (validateEmail && validatePassword) {
            this.setState({
              validateForm: true,
              nameSubmit: "onSubmit"
            });
            console.log("state password : ", this.state)
          }
        }
      );
    } else {
      this.setState({
        [e.target.name]: Object.assign({},
          this.state[e.target.name], {
            validation: false
          })
      });
      this.setState({
        nameSubmit: "offSubmit",
        validateForm: false
      });
    }
  }
}

setState 回调部分。我想知道如何创造一个更灵活的方式让我回电话,

任何提示都很好,谢谢。

1 回复 | 直到 6 年前

Community CDub 4 年前

我不知道你是什么意思,但我知道你想用另一个小函数来分解你的主函数,对吧?如果这对您没有帮助,请将完整的代码放在这里以便更好地分析。

代码

  // Validations
  isValidEmail = (emailValue) => {
    return typeof emailValue === 'string' &&
           emailValue.length >= 1 &&
           validator.isEmail(emailValue);
  }

  isValidPassword = (password) => {
    const pattern = RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}");
    return typeof password === 'string' &&
           password.length >= 1 &&
           pattern.test(password);
  }

  // updates
  updateEmail = (name, email) => {
    if (isValidEmail(email)) {
      this.setState({
        [e.target.name]: {
          ...this.state[e.target.name],
          validation: true,
          value: e.target.value
        }
      },
        () => {
          let validatePassword = this.state.password.validation;
          let validateEmail = this.state.email.validation;

          if(validateEmail && validatePassword) {
            this.setState({validateForm: true,
                          nameSubmit:"onSubmit"});
            console.log("state email: ", this.state)
          }
        }
      );

      return;
    }

    this.setState({
      [e.target.name]: {
        ...this.state[name],
        validation: false,
      },
      nameSubmit:"offSubmit",
      validateForm: false
    });
  }

  updatePassword = (name, password) => {
    if (this.isValidPassword(password)) {
      this.setState({
        [e.target.name]: {
          ...this.state[name],
          validaition: true,
          value,
        }
      },
      () => {
        let validatePassword = this.state.password.validation;
        let validateEmail = this.state.email.validation;
        if(validateEmail && validatePassword) {
          this.setState({validateForm: true, nameSubmit:"onSubmit"});
          console.log("state password : ", this.state);
        }
      });

      return;
    }

    this.setState({
      [e.target.name]: {
        ...this.state[name],
        validaition: false,
      },
      nameSubmit:"offSubmit",
      validateForm: false
    });
  }

  // main fuction
  handleChange = (e) => {
    e.preventDefault();
    const { name, value } = e.target;

    if (name === "email" ) this.updateEmail(name, value.trim())
    if (name === "password") this.updatePassword(name, value.trim())
  }

因此,首先,我将验证硬代码重构为一个调用 isValidEmail isValidPassword .

handleChange 每个的内容 if 一个叫做 updatedEmail 和 updatePassword

我用 return 里面 如果 else 另一件事,我用 spread 而不是 Object.assign

最后,我调用了传递它所需要的(名称和值)的方法;

希望对你有帮助;)