Question

我有一个可以添加产品并对其进行更新的应用程序，就这样，产品表单可以不带名称提交，并且可以创建一个新产品，名称栏中的空白行。我该如何添加验证消息因此，在提交结果之前，它需要一个“名称”字段，并且如果您尝试提交不带名称值的表单，则会显示一条消息。

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>

Answer 1

默认将错误设置为null。

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

我如何在我的React组件中添加验证消息

1 个答案: