在 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 属性在表单无效时引发错误。

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

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

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(/^[A-Z][a-z]+$/.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

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

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