CODEWITHSUNDEEP
react-native
satishkumar
satishkumar

Reputation: 146

unable to assign value dynamically to TextInput using react native

In my scenario, while focus on TextInput i am moving to another scene using navigator (using push)there i populate list,in that list selecting one value that value should be populated to the previous scene of TextInput In this case I am unable to set the selected value to the previous scene of TextInput.

My code structure is

var FirstComponent = React.createClass({
     render:function(){
             return(<TextInput value="" placeholder="Enter value" onFocus={getData.bind(this)} />)
      }
})

function getData(ev){
var target = ev;
      this.props.navigator.push({
          id:'SecondComponent',
          name:'SecondComponent',
          target:target, 
       })
}
var SecondComponent = React.createClass({
        render:function(){
               return(<TouchableHighlight onPress={fillData.bind(this,target, self.props.navigator,selectedText)}><Text>sample</Text></TouchableHighlight>)
        }
});
function fillData(rootThis,nav,selectedText,ev){

     rootThis.value=selectedText;
     rootThis.nativeEvent.target = selectedText;
     rootThis.nativeEvent.target .text= selectedText; // Here ' rootThis ' is route object 'this'

//how to fill selectedText in FirstComponent TextInput value
}

Upvotes: 1

Views: 988

Answers (1)

Eyal Eizenberg
Eyal Eizenberg

Reputation: 4033

First of all, you don't need to use bind anymore if you are just passing the default attribute returned from a component.

Anyway, I would do something like this:

first_component.js:


var FirstComponent = React.createClass({
  getInitialState: function() {
    value: ""
  },

  render:function(){
    return(
      <TextInput value={this.state.value} placeholder="Enter value" onFocus={this.moveToSecondComponent} >
    );
  },

  moveToSecondComponent: function() {
    this.props.navigator.push({
      component: SecondComponent
      onSelect: this.popBackAndUpdate // This assumes you are using Navigator. If you are using NavigatorIOS, just wrap it in 'passprops'
    })
  },

  popBackAndUpdate: function(value) {
    this.setState({value: value});
    this.props.navigator.pop();
  }

});


second_component.js:
var SecondComponent = React.createClass({
  render: function() {
    return(
      <TouchableHighlight onPress={() => { this.props.route.onSelect("new value")}}>
        <Text>sample</Text>
      </TouchableHighlight>)
  }
});

This main point is that in the 2nd component you just pass the new value to the callback function and it will pop back the navigator.

Hope that helps.

Upvotes: 1

Related Questions