Javascript 如何使用 react native 动态地为 TextInput 赋值

How to assign value dynamically to TextInput using react native

提问by vasavi

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.

在我的场景中，虽然专注于 TextInput，但我正在使用导航器（使用推送）移动到另一个场景，在那里我填充列表，在该列表中选择一个值，该值应填充到 TextInput 的前一个场景在这种情况下，我无法设置TextInput 上一个场景的选定值。

I am sending the route object through out the navigator,But in my scenario selected value should be reassign to the previous scene of TextInput .Here TextInput event structure is like the below

我通过导航器发送路由对象，但在我的场景中，选择的值应该重新分配给 TextInput 的前一个场景。 这里 TextInput 事件结构如下所示

nativeEvent:
{ target: 2175,
pageY: 164.5,
locationX: 131,
changedTouches: [ [Circular] ],
locationY: 16.5,
identifier: 1,
pageX: 146,
touches: [],
timestamp: 6887223.188515 },
target: undefined,
currentTarget: null,
path: undefined,
type: undefined,
eventPhase: undefined,
bubbles: undefined,
cancelable: undefined,
timeStamp: 1445839347722,
defaultPrevented: undefined,
isTrusted: undefined,
isDefaultPrevented: [Function],
isPropagationStopped: [Function],
_dispatchListeners: null,
_dispatchIDs: null }

Both of this not working .What is the correct way to assign the value to the textinput. The current object getting is ok, my problem is assigning the selected value to the TextInput.

这两个都不起作用。将值分配给文本输入的正确方法是什么。当前对象获取没问题，我的问题是将选定的值分配给 TextInput。

Here i am following two approaches

在这里，我遵循两种方法

approach1:-

方法1：-

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(target,nav,selectedText,ev){
target.value=selectedText
target.nativeEvent.target = selectedText
target.nativeEvent.target .text= selectedText// Here ' target ' is route object this
//Here target is root component this
//how to fill selectedText in FirstComponent TextInput value
}

Approach2:-

方法2：-

   var FirstComponent = React.createClass({
          getInitialState:function(){
            return {textValue:""};
        },
         render:function(){
                 return(<TextInput value={this.state.textValue} 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(target,nav,selectedText,ev){
         target.setState({textValue:selectedText})//i am getting undefined is not a function

    //Here target is root component this   
    //how to fill selectedText in FirstComponent TextInput value
    }

回答by Balthazar

You could try to set the state using your event, and binding your <TextInput />with the same property of your state in your new scene

您可以尝试使用您的事件设置状态，并将<TextInput />您的状态与新场景中的相同属性绑定

eventCallback () {
  this.setState({ value: 'myvalue' })
}

And:

和：

<TextInput
  onChangeText={(value) => this.setState({ value })}
  value={this.state.value}
/>

Don't know about your exact structure, but you could also pass props to your new route with the value of your input.

不知道您的确切结构，但您也可以使用输入值将道具传递给新路线。