Реагировать на значение средства выбора Native Update, кроме компонента с ref

Question

Я новичок в React / Native, я ломаю голову над этой проблемой.Я использую библиотеку под названием response-native-image-picker-form, которая настолько хороша, что давайте использовать камеру вашего телефона или вы можете выбрать изображение из вашего альбома.

Позвольте мне показать вам код

import React, {Component} from 'react'
import {Text, View, TouchableOpacity, Picker} from 'react-native'
import t from 'tcomb-form-native'
import ImageFactory from 'react-native-image-picker-form';

const Form = t.form.Form;
const DocumentFormStruct = t.struct({
  image: t.String
});

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        form: null,
      value: null,
        language: 'PERMISO ESPECIAL',
      options: {
        fields: {
          image: {
            config: {
              title: 'Select image',
              options: ['Open camera', 'Select from gallery', 'Cancel'],
              // Used on Android to style BottomSheet
              style: {
                titleFontFamily: 'Roboto'
              }
            },
            error: 'No image provided',
            factory: ImageFactory
          }
        }
      },
        changed: false
    };
  }

  onPress = () =>{
      if (this.form == undefined){
        console.log("UNDEFINED");
      }else {
          console.log(this.form.getValue());
      }
  }

  componentDidMount() {
      // var value = this.form.getValue();
      // console.log(value);
  }

  shouldComponentUpdate(nextProps, nextState) {
      return false;
  }

    render() {
    return (
        <View>
            <Form
                ref={(ref: any) => {
                    this.form = ref
                }}
                type={DocumentFormStruct}
                value={this.state.value}
                options={this.state.options}
            />

            <Picker
                selectedValue={this.state.language}
                onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                <Picker.Item label="PERMISO ESPECIAL"
                             value="PERMISO ESPECIAL"/>
                <Picker.Item label="PERMISO HOJA CLARO" value="HOJA CLARO"/>
                <Picker.Item label="COORDINAR CON PROPIETARIO"
                             value="COORDINA CON PROPIETARIO"/>
            </Picker>

            {this.state.language == 'HOJA CLARO'
                ?
                <View>
                    <Text>Hello World!</Text>
                </View>
                :
                null
            }

            <TouchableOpacity
                onPress={this.onPress}
            >
                <Text> Touch Here </Text>
            </TouchableOpacity>
        </View>
    )
  }
}

Я знаю, что при использованииcomponentupdate вы можете предотвратить ненужные повторные рендеры.Дело в том, что эта библиотека должна использовать это свойство ref, чтобы при изменении состояния любого другого значения выбранное изображение получало нулевое значение.Есть ли способ или обходной путь для этого.Если я использую shouldcomponentupdate, значение средства выбора не изменится, но, по крайней мере, я получу текущее значение средства выбора изображения.

Answer 1

Обходной путь - воспользоваться преимуществами onChange формы.( См. Документы )

<Form
    ref={(ref: any) => {
      this.form = ref
    }}
    type={DocumentFormStruct}
    value={this.state.value}
    options={this.state.options}
    onChange={this.onChange}
/>

В вашем методе onChange сохраните значение в локальном состоянии.

onChange = (value) => {
    this.setState({value});
}

Теперь, даже если оно было инициализировано, как вы сказали,он получит значение из локального состояния и не станет нулевым.