在本机反应中选择器值更改调用函数或数组 [英] On Picker Value change call function or array in react native

问题描述

这里我要做的是，在 Picker 值更改时调用函数并尝试调用 for 循环并绘制 5 TextInput ，但出现错误.请帮助解决这个小错误，当我尝试直接调用 myloop 数组时，更改其生成的错误，即数组不能作为函数调用.

import * as React from 'react';import { Text, View, StyleSheet, Alert, Picker } from 'react-native';从'react-native'导入{常量}；import { TextInput } from 'react-native-gesture-handler';var myloop = [];;导出默认类 UiDynamic 扩展 React.Component {//向您的状态添加一个 selectValue 以停止覆盖状态 = {PickerValueHolder: [],选定值:''}componentDidMount() {//删除返回获取('http:///Dsenze/userapi/inventory/viewinventorytype'，{方法:'POST'，标题:{'接受':'应用程序/json'，'内容类型':'应用程序/json'，},正文:JSON.stringify({用户名":管理员"，密码":管理员"})}).then((response) => response.json()).then((responseJson) => {//使用inventoryTypeData，因为它已经是一个数组让 PickerValueHolder = responseJson.inventoryTypeData;console.log("数组数据", PickerValueHolder)this.setState({ PickerValueHolder });//设置新状态}).catch((错误) => {控制台错误(错误)；});}onPickerValueChange=()=>{{我的循环}console.log("选择器更改", myloop);//this.onPickerValueTextinput();}使成为() {for (让 i = 0; i <5; i++) {myloop.push(<查看键={<TextInput></TextInput>}><TextInput style={{ textAlign: 'center', marginTop: 5 }}placeholder="输入您的姓名"></TextInput></查看>)}返回 (<视图样式={styles.container}>{/* {myloop} */}{<选择器selectedValue={this.state.selectedValue}onValueChange={this.onPickerValueChange}>{ this.state.PickerValueHolder.map((item, key)=><Picker.Item label={item.name} value={item.name} key={key}/>)}</选择器>}</查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，justifyContent: '中心',背景颜色:'#ecf0f1'，填充:8，}});

谢谢

解决方案

你的目标在 ValueChange 上渲染 5 个文本输入

和你所在州的布尔值

state = {PickerValueHolder: [],选择值:''，isChange : 假，}

您的 onChange 函数，通过设置布尔值来应用任何条件来呈现这些项目:

<预><代码>onPickerValueChange=(itemValue, itemPosition)=>{this.setState({isChange:true});}

使一个函数显示 Items 呈现 5 个输入；

const displayItems = () =>{如果(this.state.isChange){返回 (让 i=0; i<5; i++) {返回 (<查看键={<TextInput></TextInput>}><TextInput style={{ textAlign: 'center', marginTop: 5 }}placeholder="输入您的姓名"></TextInput></查看>);}}};

渲染

返回 (<视图样式={styles.container}>{显示项目()}<选择器selectedValue={this.state.selectedValue}onValueChange={this.onPickerValueChange}>{ this.state.PickerValueHolder.map((item, key)=><Picker.Item label={item.name} value={item.name} key={key}/>)}</选择器></查看>);

Here what am trying to do is , on Picker value change calling the function and trying to call for loop and draw 5 TextInput , but getting error . Please help for this small mistake , when i am trying to call myloop array directly on value change its generating error that array can't be call as function .

import * as React from 'react';
import { Text, View, StyleSheet, Alert, Picker } from 'react-native';
import { Constants } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

var myloop = [];
;
export default class UiDynamic extends React.Component {

  // add a selectValue to your state to stop the overwriting
  state = {
    PickerValueHolder: [],
    selectedValue: ''
  }

  componentDidMount() {
    // remove the return 
   fetch('http:///Dsenze/userapi/inventory/viewinventorytype', {  
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          "username" :"admin",
          "password" :"admin"
        })
      }).then((response) => response.json())
      .then((responseJson) => {
        // use the inventoryTypeData as it is already an array
       let PickerValueHolder = responseJson.inventoryTypeData;
        console.log("Array data" , PickerValueHolder)

        this.setState({ PickerValueHolder }); // Set the new state
      })
      .catch((error) => {
        console.error(error);
      });
    }

onPickerValueChange=()=>{

    {myloop}
    console.log("Picker change" , myloop);
    //  this.onPickerValueTextinput();

    }

  render() {

        for (let i = 0; i < 5; i++) {

            myloop.push(
              <View key={<TextInput></TextInput>}>
              <TextInput style={{ textAlign: 'center', marginTop: 5 }} 
              placeholder="Enter your name ">
              </TextInput>
              </View>
            )
            }


    return (
      <View style={styles.container}>

      {/* {myloop} */}

        {<Picker
                selectedValue={this.state.selectedValue}
               onValueChange={this.onPickerValueChange}>
                { this.state.PickerValueHolder.map((item, key)=>
                  <Picker.Item label={item.name} value={item.name} key={key} />
                )}
              </Picker>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

Thanks

解决方案

Your goal render 5 text Inputs on ValueChange

and a boolean in your state

state = {
    PickerValueHolder: [],
    selectedValue: '',
    isChange : false,
  }

Your onChange function, apply any condition to render those items by setting the boolean:

onPickerValueChange=(itemValue, itemPosition)=>{
      this.setState({isChange:true});
    }

Make a function display Items that renders 5 inputs;

const displayItems =  () => {
 if (this.state.isChange) {
  return  for (let i=0; i<5; i++) {
     return (
           <View key={<TextInput></TextInput>}>
              <TextInput style={{ textAlign: 'center', marginTop: 5 }} 
              placeholder="Enter your name ">
              </TextInput>
              </View>
      );
    }
 }
};

Render

return (
      <View style={styles.container}>
        {displayItems()}
        <Picker
                selectedValue={this.state.selectedValue}
               onValueChange={this.onPickerValueChange}>
                { this.state.PickerValueHolder.map((item, key)=>
                  <Picker.Item label={item.name} value={item.name} key={key} />
                )}
              </Picker>
      </View>
);

这篇关于在本机反应中选择器值更改调用函数或数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！