Question

我在ReactJS中有一个检查string.trim() === ""是否存在的函数。如果所有修剪后的字符串都不等于“”，该函数应返回false，但始终返回true。

我从state中提取了这些字符串。

import React, {Component} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './Contact.scss'

export default class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      subject: "",
      message: ""
    }
  }

  setName = (e) => {
    this.setState({name: e.target.value});
  };
  setEmail = (e) => {
    this.setState({email: e.target.value});
  };
  setSubject = (e) => {
    this.setState({subject: e.target.value});
  };
  setMessage = (e) => {
    this.setState({message: e.target.value});
  };

  validate = () => {
    const { name, email, subject, message } = this.state;
    return name.trim() === "" ||
      email.trim() === "" ||
      subject.trim() === "" ||
      message.trim() === "";
  };

  render() {
    const { name, email, subject, message } = this.state;
    return (
      <div id="Contact" className="Wrapper-contact">
        <div className="Contact-container">
          <div className="Contact-title">
            HIT ME UP
          </div>
          <div className="Contact-content">
            <form className="Form" action="https://formspree.io/a@gmail.com" method="POST">
              <div className="Form-group">
                <label>NAME</label>
                <input
                  className="Form-field"
                  name="Name"
                  placeholder="Your Name"
                  value={name}
                  onChange={this.setName}
                />
              </div>
              <div className="Form-group">
                <label>EMAIL</label>
                <input
                  className="Form-field"
                  name="_replyto"
                  placeholder="Your Email"
                  value={email}
                  onChange={this.setEmail}
                />
              </div>
              <div className="Form-group">
                <label>SUBJECT</label>
                <input
                  className="Form-field"
                  name="Subject"
                  placeholder="Subject"
                  value={subject}
                  onChange={this.setSubject}
                />
              </div>
              <div className="Form-group">
                <label>MESSAGE</label>
                <textarea
                  className="Form-textarea"
                  name="Message"
                  placeholder="Your Message..."
                  rows="7"
                  value={message}
                  onChange={this.setMessage}
                />
              </div>
              <input type="hidden" name="_next" value="/"/>
              <button
                className="Contact-button"
                type="submit"
                disabled={!!this.validate() ? "true" : "false"}
              >
                SEND
              </button>
            </form>
            <div className="Connect">
              <span style={{padding: '5%'}}>Also, don't forget to connect with me!</span>
              <a className="Connect-in" href="link" target="_blank" rel="noopener noreferrer">
                <FontAwesomeIcon icon={['fab', 'linkedin']} size="2x"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

该函数仍然始终返回true。

Answer 1

您不是在调用函数，而是在使用它的引用。尝试改为调用它。另外，您还在表达式块中使用字符串，例如{"true"}。因此，它不是那样工作的。尝试这样：

disabled={!!this.validate() ? true : false}

但是，如您所知，您可以在没有三元条件的情况下使用函数：

disabled={!!this.validate()}

因为它返回的是布尔值本身，而不是字符串。

Answer 2

显然是在更换 disabled={!!this.validate() ? "true" : "false"}与 disabled={!!this.validate()}确实解决了问题。

JS / JSX函数始终返回true，即使它为false

2 个答案: