如何使多个组件的ref唯一反应

Question

我的问题是，当我希望它从两者返回时，如果输入组件为空，则返回仅针对最后一个组件的验证消息。

我试图添加一个索引并获取未定义的值，或者我是否动态 添加了一个具有唯一值的参考名称＆＃39;

我在某处读到了引用必须是唯一的 - 但我如何使其独一无二？

目标是触发子组件的验证功能，以在表单提交时显示错误消息。

任何人都可以建议我如何做到这一点。

PARENT

class MainForm extends Component {

  handleSubmit(e) {
    e.preventDefault();
    this.inputRef.handleInputChange(e);   
  }

  render() {
    const nameFields = [
      {
        id: 'firstame', type: 'text', name: 'firstname', label: 'First name', required: true,
      },
      {
        id: 'lastName', type: 'text', name: 'lastname', label: 'Last name', required: true,
      },
    ];
    return (
      <div>
        <form onSubmit={e => (this.handleSubmit(e))} noValidate>
          <div className="form__field--background">
            <p> Please enter your name so we can match any updates with our database.</p>
            <div>
              {
                nameFields.map(element => (
                  <div key={element.id} className="form__field--wrapper">
                    <InputField
                      type={element.type}
                      id={element.name}
                      name={element.name}
                      required={element.required}
                      placeholder={element.placeholder}
                      label={element.label}
                      pattern={element.pattern}
                      isValid={(e, name, value) => {
                        this.inputFieldValidation(e, name, this.handleFieldValues(name, value));
                      }}
                      ref={c => this.inputRef[`${element.name}`] = c}
                    />
                  </div>
                ))
              }
            </div>
          </div>
          <button type="submit" className="btn btn--red">Update Preferences</button>
        </form>

      </div>
    );
  }
}

export default MainForm;

儿童

class InputField extends Component {
  constructor() {
    super();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleOnBlur = this.handleOnBlur.bind(this);
    this.state = {
      valid: null,
      message: '',
    };
  }

  /**
    * Calls helper function to validate the input field
    * Sets the the state for the validation and validation message
    */
  validateField(e) {
    const props = {
      field: e.target,
      value: e.target.value,
      label: this.props.label,
      required: this.props.required,
      min: this.props.min,
      max: this.props.max,
      pattern: this.props.pattern,
      emptyError: this.props.emptyFieldErrorText,
      invalidError: this.props.invalidErrorText,
    };
    let validation = this.state;
    // helper function will return an updated validation object
    validation = fieldValidation(props, validation);
    this.setState(validation);

    return validation;
  }

  /**
    * Calls validateField method if field is a checkbox.
    * Handles the callback isValid state to parent component.
    */
  handleInputChange(e) {
    if ((e.target.required && e.target.type === 'checkbox')) {
      this.validateField(e);
    }
  }

  handleOnBlur(e) {
    if (e.target.type !== 'checkbox') {
      this.validateField(e);
    }
  }
  render() {
    return (
      <div >
        <label id={`field-label--${this.props.id}`} htmlFor={`field-input--${this.props.id}`}>
          {this.props.label}
        </label>
        {this.props.helpText &&
        <p className="form-help-text">{this.props.helpText}</p>
        }
        <input
          type={this.props.type}
          id={`field-input--${this.props.id}`}
          name={this.props.name && this.props.name}
          required={this.props.required && this.props.required}
          placeholder={this.props.placeholder && this.props.placeholder}
          onBlur={e => this.handleOnBlur(e)}
          onChange={e => this.handleInputChange(e)}
          ref={this.props.inputRef}
        />
        }
        {this.state.valid === false &&

            <span className="form-error">                  
               {this.state.message}
            </span>
        }
      </div>
    );
  }
}

export default InputField;