How to set the value from an imported custom field?

[andruxnet]

Hi,

I created a custom component for an image picker, and placed it as a custom field to my form, but I can't figure out how to make the selected image available to the form values.

Here's how I'm including my custom component:

      <CustomImagePicker fieldRef='avatar'
                         onChange={this._handleChange.bind(this)}
                         placeholderText='Avatar'
      />

This is the _handleChange method:

  _handleChange(event) {
    const value = event.nativeEvent.text
    console.log('test') // <=== this is not being fired

    this.setState({
      imagePath: value
    })

    if(this.props.onChange)      this.props.onChange(this.props.fieldRef, value);
    if(this.props.onValueChange) this.props.onValueChange(value);
  }

My image picker component has also a TextInput field so that I can store the image path in it, that's the one I want to use as the value to be sent to the form.

          <TouchableWithoutFeedback onPress={() => this._openImagePicker()}>
            <View style={{flex: 1, flexDirection: 'row'}}>
              <TextInput style={StyleSheet.flatten(placeholderStyle)}
                         placeholder={placeholderText}
                         ref={fieldRef}
                         editable={false}
                         onChange={onChange}
                         value={this.state.imagePath}
              />
              {
                this.state.imagePath && (
                  <View style={{flex: 1}}>
                    <Image source={{uri: this.state.imagePath}}
                           style={{flex: 1, marginLeft: 10, maxWidth: imageWidth, height: imageHeight}}
                    />
                  </View>
                )
              }
            </View>
          </TouchableWithoutFeedback>

My image picker when successful is correctly setting state.imagePath, so I'm able to see the image I chose inside the Image component.

The TextInput component also is set with the correct image path, but this value is never passed to the form.

Could you tell if I'm missing something obvious here? Where is the _handleChange method supposed to be placed in? inside the component where I have the form or inside my custom image picker component?

[bhavinpankanis]

Same Issue. I am able to get the updated value but its not inserting in formdata. Please provide input

My code is as follows:

handleChange(event){
var value = event.nativeEvent.text;

    this.setState({value:value});
 
    console.log('value',value)

    // This updates values in form everytime i update 
      if(this.props.onChange)      this.props.onChange(this.props.fieldRef, value);
    if(this.props.onValueChange) this.props.onValueChange(value);
    console.log('handleChange',formData)
  }

return
<View style={{ flexDirection: "row" }}>

{name}


<TextInput
{...this.props}
ref={name}
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChange={this.handleChange.bind(this)}
editable={true}
placeholder={placeHolder}
value={value}
style={styles.TextInputStyleClass}
/>

var styles = StyleSheet.create({
MainContainer: {
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex: 1,
margin: 10
},
TextInputStyleClass: {
textAlign: 'center',
height: 50,
borderWidth: 2,
borderColor: '#FF5722',
borderRadius: 20,
backgroundColor: "#FFFFFF"
},
baseText: {
fontFamily: 'Cochin',
},
});