ReactJS：トリガーイベントonBlur

Question

入力フィールドの子コンポーネントを持っていて、確認のonBlurイベントをチェックしています。

子コンポーネントの使用法：

<TextInput 
    id={'lastName'} 
    label={'Last name'} 
    required={true} 
    minChars={3} 
    maxChars={25} 
/> 

子コンポーネントコード：

onBlur(event) { 
    // logic here 
} 

render() { 
    let props = this.props; 

    return (
     <div> 
      <div className="form-group"> 
       <label htmlFor={props.id}>{props.label}</label> 
       <input 
        id={props.id} 
        type={props.type} 
        className="form-control" 
        onBlur={this.onBlur.bind(this)} 
       /> 
       <p className="text-danger">{this.error}</p> 
      </div> 
     </div> 
    ); 
} 

これだけで正常に動作します。

ユーザーが親コンポーネントからフォームを送信すると、すべての入力でonBlurが起動されるようにします。どのように私はこれを達成することができますか？

Answer 1

親コンポーネントで：子コンポーネントで

_handleBlur (eventData) {} 

render() { 
    const handleBlur = this._handleBlur.bind(this); 

    return (
     <form> 
      <ChildComponent onBlur={handleBlur} {...moreProps} /> 
      <ChildComponent onBlur={handleBlur} {...moreProps} /> 
      <ChildComponent onBlur={handleBlur} {...moreProps} /> 
      <button type="submit" onClick={handleBlur}>Submit</button> 
     </form> 
    ); 
} 

：EVENTDATAまたは他のparamsに基づいて

render() { 
    const props = this.props; 

    return (
     <div> 
      <div className="form-group"> 
       <label htmlFor={props.id}>{props.label}</label> 
       <input 
        id={props.id} 
        type={props.type} 
        className="form-control" 
        onBlur={props.onBlur} 
       /> 
       <p className="text-danger">{this.error}</p> 
      </div> 
     </div> 
    ); 
} 

、あなたがぼやけする必要があるフィールドを定義することができますが。私はぼんやりして正確に何が起こる必要があるのか​​分かりません。場合によっては、handleBlurメソッドとhandleBlurAllメソッドに分割するほうがよい場合もあります。 ほしいと思っています。