在 parent 组件的数组中验证 child 中的输入

Question

我有一个组件将呈现数组中的 child 组件，并且 child 组件将具有来自 Native Base 的输入组件。如果输入组件为空或 null，我想验证它们。但是如果 child 数组有超过 1 个 child，下面的代码将不起作用。

Parent

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>
    }
}

Child

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>
    }
}

Answer 1

每次创建新的 Child 组件时，您都会覆盖 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();
  })
}

在 parent 组件的数组中验证 child 中的输入

Validate input in child in an array from parent component

input

react-native

native-base