Question

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

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

select *
from a
inner join b on 
  b.id = a.someid
  or exists
  (
    select *
    from c
    where c.someid = a.someid
    and c.id = b.id
  )

这两个都不起作用。将值分配给textinput的正确方法是什么。当前对象获得正常，我的问题是将所选值分配给TextInput。

我在这里遵循两种方法

approach1： -

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 }

Approach2： -

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
}

Answer 1

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

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

和

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

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

Answer 2

查看我为此创建的功能示例，它为您提供了一个基础来做您需要的事情

import React, {useState} from 'react';
import {
  View,
  TextInput,
  Button,
  StyleSheet,
} from 'react-native';

export default ({navigation}) => {
  const [textInput, setTextInput] = useState([]);
  const [inputData, setInputData] = useState([]);

  //function to add TextInput dynamically
  const addTextInput = (index) => {
    let inputs = [...textInput];
    inputs.push(
      <TextInput
        key={index}
        style={styles.textInput}
        onChangeText={(text) => addValues(text, index)}
      />,
    );
    setTextInput(inputs);
  };

  //function to add text from TextInputs into single array
  const addValues = (text, index) => {
    let dataArray = inputData;
    let checkBool = false;
    if (dataArray.length !== 0) {
      dataArray.forEach((element) => {
        if (element.index === index) {
          element.text = text;
          checkBool = true;
        }
      });
    }
    if (checkBool) {
      setInputData(dataArray);
    } else {
      dataArray.push({text: text, index: index});
      setInputData(dataArray);
    }
  };

  //function to console the output
  const getValues = () => {
    console.log('Data', inputData);
  };

  //function to remove TextInput dynamically
  const removeTextInput = () => {
    let textInputnew = [...textInput];
    let inputDatanew = [...inputData];
    textInputnew.pop();
    inputDatanew.pop();
    setTextInput(textInputnew);
    setInputData(inputDatanew);
  };

  return (
    <View>
      <View style={styles.row}>
        <View style={{margin: 10}}>
          <Button title="Add" onPress={() => addTextInput(textInput.length)} />
        </View>
        <View style={{margin: 10}}>
          <Button title="Remove" onPress={() => removeTextInput()} />
        </View>
      </View>
      {textInput.map((el) => {
        return el;
      })}
      <Button title="Get Values" onPress={() => getValues()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  buttonView: {
    flexDirection: 'row',
  },
  textInput: {
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    margin: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
});

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

2 个答案: