如何使用react native动态赋值给TextInput

How to assign value dynamically to TextInput using react native

本文关键字：赋值 TextInput 动态 native 何使用 react      更新时间：2023-09-26

在我的场景中，当我专注于TextInput时，我正在使用导航器(使用push)移动到另一个场景，我填充列表，在该列表中选择一个值，该值应该填充到TextInput的上一个场景。在这种情况下，我无法将所选值设置为TextInput的上一个场景。

我通过导航器发送路由对象，但是在我的场景中，所选择的值应该被重新分配给前面的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 }

这两种方法都不能工作，正确的方法是将值赋给textinput。当前对象获取是好的，我的问题是将选定的值分配给TextInput。

这里我遵循两种方法

approach1: -

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: -

   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
    }

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

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

: 

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

我不知道你的确切结构，但是你也可以用你输入的值传递props给你的新路由

相关文章：