React native 验证来自父组件的数组中的子组件中的输入

我有一个组件，它将呈现数组中的子组件，子组件将具有来自本机基的输入组件。我想验证输入组件是否为空或null。但是，如果子数组有多个子数组，则下面的代码不起作用

家长

class Parent extends Component {
    validateForms = () => {
      this.child.onSubmitValidate();
    }

    render() {     
       const childArray = stopsArray.map((item, key) => {
          return (
            <View key={key}>
              <Child
                ref={instance => { this.child = instance; }}
                itemIndex={key}
              />
            </View>
          );
        });

        <View style={styles.container}>
          <View style={{ flex: 1 }}>
            {
              childArray
            }
          </View>

          <Button
             onPressAction={() => this.validateForms()}
             buttonText={'PAYMENT'}
          />
        </View>
    }
}

类父级扩展组件{
validateForms=（）=>{
this.child.onSubmitValidate（）；
}
render（）{
const childArray=stopsArray.map（（项，键）=>{
返回(
{this.child=instance；}}
itemIndex={key}
/>
);
});
{
子数组
}
this.validateForms（）}
buttonText={'PAYMENT'}
/>
}
}

儿童

import { Input } from 'native-base';

class Child extends Component {
    onSubmitValidate = () => {
      let error = false;

      ['buildingHouseNo', 'contactName', 'contactPhone']
        .forEach((name, key) => {
          const value = this.state[name];

          const nameValid = `${name}Valid`;

          if (!value || value.trim() === '' || value === null) {
            error = true;

            this.setState({
              [nameValid]: false
            });
          }
        });

      if (!error) {
        this.props.togglePayment();
      }
    }

    handleInput = (title, itemIndex, value) => {
      if (title === 'BuildingHouseNo') {
        this.setState({ buildingHouseNo: value });
      } else if (title === 'RecipientName') {
        this.setState({ contactName: value });
      } else if (title === 'RecipientPhone') {
        this.setState({ contactPhone: value });
      }

      this.validate(title, value);

      this.props.getRecipientInfo({
        index: itemIndex,
        title,
        value
      });
    }

    validate = (title, value) => {
      if (title === 'BuildingHouseNo') {
        if (!value || value.trim() === '' || value === null) {
          this.setState({ buildingHouseNoValid: false });
        } else {
          this.setState({ buildingHouseNoValid: true });
        }
      } else if (title === 'RecipientName') {
        if (!value || value.trim() === '' || value === null) {
          this.setState({ contactNameValid: false });
        } else {
          this.setState({ contactNameValid: true });
        }
      } else if (title === 'RecipientPhone') {
        if (!value || value.trim() === '' || value === null) {
          this.setState({ contactPhoneValid: false });
        } else {
          this.setState({ contactPhoneValid: true });
        }
      }
    }

    render() {
      const itemIndex = this.props.index;

      <View style={styles.container}>
        <View style={styles.borderInput}>
          <Input
            ref={(ref) => { this.buildingHouseNo = ref; }}
            key={itemIndex}
            clearButtonMode='while-editing'
            autoCapitalize='none'
            autoCorrect={false}
            style={styles.inputSearchBorder}
            placeholder='Building Name / House Number'
            onSubmitEditing={() => this.addr2._root.focus()}
            returnKeyType={'next'}
            onChangeText={this.handleInput.bind(this, 'BuildingHouseNo', itemIndex)}
          />
        </View>

        <View style={styles.borderInput}>
          <Input
            key={itemIndex}
            ref={(ref) => { this.contactName = ref; }}
            clearButtonMode='while-editing'
            autoCapitalize='none'
            autoCorrect={false}
            style={styles.inputSearch}
            placeholder='Name'
            value={contactName}
            onSubmitEditing={() => this.contactNo._root.focus()}
            returnKeyType={'next'}
            onChangeText={this.handleInput.bind(this, 'RecipientName', itemIndex)}
          />
        </View>

        <View style={styles.borderInput}>
          <Input
            key={itemIndex}
            ref={(ref) => { this.contactNo = ref; }}
            clearButtonMode='while-editing'
            autoCapitalize='none'
            autoCorrect={false}
            style={styles.inputSearch}
            placeholder='Contact Number'
            value={contactPhone}
            onSubmitEditing={() => this.notesToBunny._root.focus()}
            returnKeyType={'next'}
            onChangeText={this.handleInput.bind(this, 'RecipientPhone', itemIndex)}
          />
        </View>
      </View>
    }
}

import{Input}来自'native base'；
类子扩展组件{
onSubmitValidate=（）=>{
让错误=错误；
['buildingHouseNo'、'contactName'、'contactPhone']
.forEach（（名称、键）=>{
const value=this.state[name]；
常量nameValid=`${name}Valid`；
如果（！value | | value.trim（）=''| | value==null）{
错误=真；
这是我的国家({
[nameValid]：false
});
}
});
如果（！错误）{
this.props.togglePayment（）；
}
}
handleInput=（标题、项目索引、值）=>{
如果（标题=='BuildingHouseNo'）{
this.setState（{buildingHouseNo:value}）；
}else if（title=='RecipientName'）{
this.setState（{contactName:value}）；
}else if（title==‘RecipientPhone’）{
this.setState（{contactPhone:value}）；
}
验证（标题、价值）；
this.props.getRecipientInfo({
索引：itemIndex，
标题
价值
});
}
验证=（标题、值）=>{
如果（标题=='BuildingHouseNo'）{
如果（！value | | value.trim（）=''| | value==null）{
this.setState（{buildingHouseNoValid:false}）；
}否则{
this.setState（{buildingHouseNoValid:true}）；
}
}else if（title=='RecipientName'）{
如果（！value | | value.trim（）=''| | value==null）{
this.setState（{contactNameValid:false}）；
}否则{
this.setState（{contactNameValid:true}）；
}
}else if（title==‘RecipientPhone’）{
如果（！value | | value.trim（）=''| | value==null）{
this.setState（{contactPhoneValid:false}）；
}否则{
this.setState（{contactPhoneValid:true}）；
}
}
}
render（）{
const itemIndex=this.props.index；
{this.buildingHouseNo=ref；}}
键={itemIndex}
clearButtonMode='while-editing'
自动资本化=“无”
自动更正={false}
style={styles.inputSearchBorder}
占位符=“建筑物名称/房屋编号”
onSubmitEditing={（）=>this.addr2.\u root.focus（）}
returnKeyType={'next'}
onChangeText={this.handleInput.bind（this'BuildingHouseNo'，itemIndex）}
/>
{this.contactName=ref；}}
clearButtonMode='while-editing'
自动资本化=“无”
自动更正={false}
style={style.inputSearch}
占位符='Name'
值={contactName}
onSubmitEditing={（）=>this.contactNo.\u root.focus（）}
returnKeyType={'next'}
onChangeText={this.handleInput.bind（this'RecipientName'，itemIndex）}
/>
{this.contactNo=ref；}}
clearButtonMode='while-editing'
自动资本化=“无”
自动更正={false}
style={style.inputSearch}
占位符=“联系电话”
值={contactPhone}
onSubmitEditing={（）=>this.notesToBunny.\u root.focus（）}
returnKeyType={'next'}
onChangeText={this.handleInput.bind（this'RecipientPhone'，itemIndex）}
/>
}
}

每次创建新的

子组件时，您都会覆盖
ref
。您可以创建一个ref值数组，并在其中循环以验证每个ref值

constructor() {
  super();

  this.child = [];
{

const childArray = stopsArray.map((item, key) => {
  return (
    <View key={key}>
      <Child
        ref={instance => { this.child[key] = instance; }}
        itemIndex={key}
      />
    </View>
  );
});

//...

validateForms = () => {
  this.child.forEach(child => {
    child.onSubmitValidate();
  })
}

constructor（）{
超级（）；
this.child=[]；
{
const childArray=stopsArray.map（（项，键）=>{
返回(
{this.child[key]=instance；}}
itemIndex={key}
/>
);
});
//...
validateForms=（）=>{
this.child.forEach（child=>{
onSubmitValidate（）；
})
}
每次创建新的
子组件时，您都会覆盖您的
ref
。您可以创建一个ref值数组，并循环验证每个ref值

constructor() {
  super();

  this.child = [];
{

const childArray = stopsArray.map((item, key) => {
  return (
    <View key={key}>
      <Child
        ref={instance => { this.child[key] = instance; }}
        itemIndex={key}
      />
    </View>
  );
});

//...

validateForms = () => {
  this.child.forEach(child => {
    child.onSubmitValidate();
  })
}

constructor（）{
超级（）；
this.child=[]；
{
const childArray=stopsArray.map（（项，键）=>{
返回(
{this.child[key]=instance；}}
itemIndex={key}
/>
);
});
//...
validateForms=（）=>{
this.child.forEach（child=>{
onSubmitValidate（）；
})
}
你能记录
onSubmitValidate
激发时的状态吗？你能记录
onSubmitValidate
激发时的状态吗？我收到了这个错误…“undefined不是构造函数init
this.child={}中的一个对象（计算'\u this.child[key]=instance'）”；
另一个错误。。。“_this.child.forEach不是一个函数。”（在“_this.child.forEach（function（child）{child.onSubmitValidate（）；}）”中，“_this.child.forEach”未定义）“我已经找出了上述错误的原因。只需将构造函数init函数更改为
this.child=[]；
，而不是
this.child={}；
我收到了这个错误…”未定义不是对象（evalu）