unable to assign value dynamically to TextInput using react native

Question

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
}

Eyal Eizenberg · Accepted Answer · 2015-10-27 05:45:50Z

1

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.

answered Oct 27, 2015 at 5:45

Eyal Eizenberg

4,0333 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

satishkumar Over a year ago

thnks eyal83.in my case popBackAndUpdate function is outside the component here how can i get FirstComponent this

Eyal Eizenberg Over a year ago

Sorry, I don't understand the question. Can you explain?

satishkumar Over a year ago

ok.how can I define popBackAndUpdate function out side the component.

Eyal Eizenberg Over a year ago

You probably don't want to do that. You should keep a function which is really "React oriented" in the component. You want your 'this' to be clear that it's the React component. If you need to reuse it in several places, you can create a mixin and just include it in your different components.

satishkumar Over a year ago

In my case mixin(because i am new to reactnative) are not suitable. Is it not possible to define popBackAndUpdate function out side the component.

Collectives™ on Stack Overflow

unable to assign value dynamically to TextInput using react native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related