輸入檢測表單提交使用反應

Question

問題是如果我可以通過輸入元素捕獲，如果他已經提交 沒有通過任何道具，因爲我不能改變代碼體系結構像設置 一個this.state或創建另一個文件管理這個，這就是爲什麼我需要輸入 自己認識到他已經提交，所以他可以運行它自己的字段的verifyField方法來添加類hasError並顯示CSS。

我有一個之情況，其中i有3個文件，形狀group.js僅呈現輸入 html元素並具有確認的功能，Register.js是反應成分 其中i將使所有的輸入字段使用form-group.js組件和 最後一個文件是Modal.js，其中的提交按鈕位於。代碼如下所示：

形式，group.js

import React from 'react'; 
class FormGroup extends React.Component { 

    verifyField(validations) { 
    // Code to verify the field if null and set className 
    const hasError = 'hasError' 
    } 

    render() { 
    return (
    <div> 
     <input id="myform" onSubmit={// Try to run verifyField(this.props.validations) when submitted but onSubmit only works in the form element} className={`${hasError}`} ></input> 
    </div> 
    ) 
    } 
} 

Register.js

import React from 'react'; 
import FormGroup from './form-group.js' 

class Register extends React.Component { 

    render() { 
    return (
    <div> 
     <form name="form" id="form"> 
     <FormGroup> 
      required 
      name='Full Name' 
      validations={validations} 
     </FormGroup> 
     <FormGroup> 
      required 
      name='Mother Name' 
      validations={validations} 
     </FormGroup> 
     <FormGroup> 
      required 
      name='Nickname' 
      validations={validations} 
     </FormGroup> 
     <form/> 
    </div> 
    ) 
    } 
} 

Modal.js

import React from 'react'; 
import Register from './Register.js' 

class Modal extends React.Component { 

    render() { 
    return (
    <div> 
     <Register /> 
     <button form="form">Submit</button> 
    </div> 
    ) 
    } 
} 

Answer 1

我真的不知道你是什麼'試圖從書面描述中實現，但假設你想在表單提交時動態地改變輸入的className，h你可以做什麼：

class FormGroup extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { hasError: 'noError' }; 
    } 

    verifyField(validations) { 
    // Code to verify the field if null and set className 
    // If error 
    this.setState({hasError: "hasError"}) 
    } 

    render() { 
    return (
    <div> 
     <input id="myform" className={`${this.state.hasError}`} onSubmit={ // call verifyField } ></input> 
    </div> 
    ) 
    } 
}