javascript - 如何在 React Native 中动态添加或删除文本输入

Question

如何通过单击按钮在 React Native 中添加文本输入？例如，我会按“+”按钮，它会在 View 底部添加文本输入。

这是我在另一个页面中找到的代码，但是当我点击加号时什么也没有发生

var textInput = []

let addTextInput = (key) => {
    textInput.push(<TextInput key={key} style={{color:'red',borderColor:'red'}}/>);
    { textInput }
}

let orgServiceandWorkHours = (
    <View>
        <Button title='+' onPress={() => 
       addTextInput(textInput.length)} />
    {textInput.map((value, index) => {
      return value
    })}
    </View>
)

Answer 1

这是一个完整的示例 ( https://snack.expo.dev/@heytony01/mature-carrot ) 和下面的代码。

export default function App() {

  const [numTextInputs,setNumTextInputs] = React.useState(0);
  return (
    <View style={styles.parent}>
        {/* Button */}
        <TouchableOpacity onPress={()=>setNumTextInputs(val=>val+1)} style={styles.buttton}>
              <Text style={styles.text}> Add TextInput </Text>
        </TouchableOpacity>
        <ScrollView style={{flex:1}} >
              {[...Array(numTextInputs).keys()].map(key=>{
                return <TextInput key={key} placeholder="Here Man" style={{width:200,height:100,borderColor:"blue",margin:10,borderWidth:1}}/>
              })}
        </ScrollView>
    </View>
  );


}

const styles = StyleSheet.create({
  parent:{flex:1,justifyContent:"center",alignItems:"center"},
  textInput:{width:"80%",height:"5%",backgroundColor:"lightgray",margin:20,borderRadius:10,textAlign:"center"},
  buttton:{width:"80%",height:"12%",backgroundColor:"lightblue",borderRadius:10,
        justifyContent:"center",alignItems:"center"
        },
  text:{fontSize:30,fontFamily:"bold",color:"black"},
})