javascript - 不允许输入字段中的空格React

Question

我有一个注册表单，它发送带有名字和姓氏的请求并且工作正常。但是，当用户输入时whitespace，它会将其视为有效输入。验证错误是从 api 的响应中发送的，其中空白输入会给出错误。我试图修剪名字，submit()认为它有空格，它将删除它并视为空白输入。但这似乎不起作用。我怎样才能实现它的逻辑来修剪空白而不是允许它。

export default class Signup extends Form {
    constructor(props, context) {
        super(props, context);
        this.state = {                
            firstName: '',
            lastName: '',        
        };
    
        this.handleChange = this.handleChange.bind(this);

    }

    
    submit() {          
        let firstName=this.state.firstName.trim(); 
       
        return this.app.register({
            firstName: firstName,
            lastName: this.state.lastName,
        }).then(account => success())
        .catch(e => {
            this.setState({ error: `signup_form_error_${e}` });
          })    
    }
    
    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    render(props, state) {


        return <form onSubmit={this.form.submit} name="signup" noValidate>
          <input type="text" name="firstName" value={this.state.firstName} onChange={this.handleChange} />
            <input type="text" name="lastName" value={this.state.lastName} onChange={this.handleChange} />
       

            <div class="s72-buttons">
                <button type="submit"</button>
            </div>
        </form>;
    }
}

标签： javascriptreactjsvalidation

Answer 1

错误就onSubmit在你身上，<form/>你有这样的

this.form.submit

但this.form不存在，默认行为发生

export default class Signup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {                
            firstName: '',
            lastName: '',        
        };
    
        this.handleChange = this.handleChange.bind(this);
        this.submit = this.submit.bind(this);

    }

    
    submit(event) {
        event.preventDefault();          
        const regexp = /^\S*$/; 
        const { firstName,lastName }= this.state; 
       
       if (!regexp.test(firstName) || !regexp.test(lastName)) {
         // cancel process, whitespace found;

         return;
       }

        return this.app.register({
            firstName: firstName,
            lastName: this.state.lastName,
        }).then(account => success())
        .catch(e => {
            this.setState({ error: `signup_form_error_${e}` });
          })    
    }
    
    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value.trim();
        })
    }

    render(props, state) {


        return <form onSubmit={this.submit} name="signup">
          <input pattern="/^\S*$/" type="text" name="firstName" value={this.state.firstName} onChange={this.handleChange} />
            <input pattern="/^\S*$/" type="text" name="lastName" value={this.state.lastName} onChange={this.handleChange} />
       

            <div class="s72-buttons">
                <button type="submit">submit</button>
            </div>
        </form>;
    }
}