在 React 中创建一个字段或所有字段

Question

我有一个这样的输入字段：

<Form.Field
  name="contactName"
  className=""
  control={Input}
  label="Contact Name"
  placeholder="Contact Name"
  value={this.state.contactName || ''}
  onChange={this.onChange}
/>

我想让它成为必需的，因此应该添加required的属性，现在看起来像这样：

<Form.Field
  name="contactName"
  className=""
  control={Input}
  label="Contact Name"
  placeholder="Contact Name"
  value={this.state.contactName || ''}
  onChange={this.onChange}
  required
/>

我注意到它还在输入标题附近添加了一个红色星号。 问题是用户仍然可以单击提交按钮，他们不会知道条目没有创建（他们不检查网络以查看呼叫失败）。

如果没有引入所需的数据，有没有办法使无法提交？ 还有像弹出/悬停说它需要数据的东西吗？

Answer 1

假设您使用语义 UI 来设置组件样式，您可以使用<Form.Field />的error属性在表单无效时引发错误。

要跟踪表格是否有效，您可以使用 state。 作为一个选项，您可以将Submit按钮的disabled属性设置为等于 state 变量，指示表单是否有效。

您可以在以下现场演示中找到非常基本的表单验证（匹配一个大写字母后跟小写字母的模式）：

 const { Component } = React, { render } = ReactDOM, { Form, Input, Button } = semanticUIReact const rootNode = document.getElementById('root') class App extends Component { state = { submitAttempted: false, isValid: { contactName: false, contactPhone: false, contactMail: false } } validateInput = (name,value) => { switch(name){ case 'contactName': { if(/^[AZ][az]+$/.test(value)){ return true } else return false } case 'contactPhone': { if(/^\d+$/.test(value)){ return true } else return false } case 'contactMail': { if(/^\w+@\w+\.\w{1,4}$/i.test(value)){ return true } else return false } default: return false } } onChange = ({target:{name,value}}) => this.setState({ [name]: value, isValid: {...this.state.isValid, [name]: this.validateInput(name, value) } }) onSubmit = e => { e.preventDefault() this.setState({ submitAttempted: true }) Object.values(this.state.isValid).every(Boolean) && console.log(this.state.contactName, this.state.contactPhone, this.state.contactMail) } render(){ return ( <Form onSubmit={this.onSubmit} > <Form.Field name="contactName" className="" control={Input} label="Contact Name" placeholder="Contact Name" value={this.state.contactName || ''} onChange={this.onChange} required error={( (this.state.submitAttempted &&.this.state.isValid:contactName) && { content, 'Valid contact name should contain upper-case letters followed by lower-case letters': pointing. 'below' } )} /> <Form.Field name="contactPhone" className="" control={Input} label="Contact Phone" placeholder="Contact Phone" value={this.state.contactPhone || ''} onChange={this.onChange} required error={( (this.state.submitAttempted &&.this.state:isValid,contactPhone) && { content, 'Valid phone: should contain numbers only'. pointing. 'below' } )} /> <Form.Field name="contactMail" className="" control={Input} label="Contact Mail" placeholder="example@hello.com" value={this.state.contactMail || ''} onChange={this.onChange} required error={( (this.state.submitAttempted &&.this:state,isValid:contactMail) && { content. 'Valid e-mail format should be fulfilled'. pointing. 'below' } )} /> <Button type="submit" disabled={ this.state.submitAttempted &&.Object,values(this.state.isValid).every(Boolean) } > Submit </Button> </Form> ) } } render ( <App />, rootNode )

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.88.2/semantic-ui-react.min.js"></script><div id="root"></div>

Answer 2

您需要添加自己的验证来检查任何输入是否为空，如果任何输入为空，则单击提交按钮时显示警报。

这不是您需要添加代码以进行验证和提醒自己的内置功能。