时间戳

首页 > 解决方案 > 如何在我的反应组件中添加验证消息

reactjs - 如何在我的反应组件中添加验证消息

问题描述

我有这个应用程序可以添加产品并对其进行更新。事实上，可以在没有名称的情况下提交产品表单，并且它会在名称列中创建一个带有空行的新产品。我如何添加验证消息以便它在提交结果之前需要一个“名称”字段，如果您尝试提交没有名称值的表单，则会显示一条消息。

import React from 'react';

const RESET_VALUES = {id: '', category: '', price: '', stocked: false, name: ''};

class ProductForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSave = this.handleSave.bind(this);
    this.state = {
      product: Object.assign({}, RESET_VALUES),
      errors: {}
    };
  }
  handleChange(e) {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState((prevState) => {
      prevState.product[name] = value;
      return { product: prevState.product };
    });
  }
  handleSave(e) {
    this.props.onSave(this.state.product);
    this.setState({
      product: Object.assign({}, RESET_VALUES),
      errors: {}
    });
    e.preventDefault();
  }
  render() {
    return (
      <form>
        <h3>Enter a new product</h3>
        <p>
          <label>
            Name
            <br />
            <input type="text" name="name" onChange={this.handleChange} value={this.state.product.name}/>
          </label>
        </p>
        <p>
          <label>
            Category
            <br />
            <input type="text" name="category" onChange={this.handleChange} value={this.state.product.category} />
          </label>
        </p>
        <p>
          <label>
            Price
            <br />
            <input type="text" name="price" onChange={this.handleChange} value={this.state.product.price} />
          </label>
        </p>
        <p>
          <label>
            <input type="checkbox" name="stocked" onChange={this.handleChange} checked={this.state.product.stocked}/>
            &nbsp;In stock?
          </label>
        </p>
        <input type="submit" value="Save" onClick={this.handleSave}/>
      </form>
    );
  }
}

export default ProductForm;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： reactjs

解决方案

默认情况下将错误设置为空。

this.state = {
  product: Object.assign({}, RESET_VALUES),
  errors: null
};

将您的 handleSave 更新为如下内容：

handleSave(e) {
  e.preventDefault();
  if (this.state.product.name.trim() === '') {
    this.setState({errors: {name: 'Please fill name'}});
    return;
  }
  this.props.onSave(this.state.product);
  this.setState({
    product: Object.assign({}, RESET_VALUES),
    errors: null
  });
}

然后在输入字段下的表单渲染方法中显示错误。

<label>
  Name
  <br />
  <input type="text" name="name" onChange={this.handleChange} value={this.state.product.name}/>
  {this.state.errors && <p>{this.state.errors.name}</p>}
</label>

工作示例https://codesandbox.io/s/cocky-ride-2p8ym

推荐阅读