Question

我是新来的本地人，我正在构建一个示例应用程序，并且在向TextInput字段输入数据时收到警告。我尝试在Android模拟器和Pocophone f1设备上运行它，并得到了相同的结果。我正在使用VS Code作为我的IDE。我正在Ubuntu 18.04上进行开发
有人可以帮忙吗？这些是应用程序的屏幕截图

我输入的数据。
警告我得到

这是我的代码

        /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, TextInput, Button} from 'react-native';

    //type Props = {};
    export default class App extends Component {

      state = {
        placeName: "",
        places: []
      }


      placeNameChangedHandler = (event) => {
        this.setState({
          placeName: event
        });
      }

      placeNameSubmitHandler = () => {
        if (this.state.placeName === ""){
          return;
        }
        this.setState(prevState => {
          return {
            places: prevState.places.concat(prevState.placeName)
          };
        });
      };

      render() {
        const placesOutput = this.state.places.map(place => (
          <Text>{place}</Text>
        ));
        return (
          <View style={styles.container}>

            <View style={styles.inputContainer}>
            <TextInput
            style={{width: 200, borderColor: "black", borderWidth: 1}}
            placeholder="Place Name"
            value={this.state.placeName} 
            onChangeText={this.placeNameChangedHandler} 
            style={styles.PlaceInput} />
            <Button title="Add"  style={styles.placeButton} onPress={this.placeNameChangedHandler} />
            </View>
            <View>
                {placesOutput}
            </View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 26,
        justifyContent: 'space-between', 
        alignItems: 'center',
        backgroundColor: '#F5FCFF', 
      },
      inputContainer:{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: 'center'
      },
      PlaceInput:{
    width: "70%"
      },
      placeButton:{
    width: "30%"
      }

    });

我按照下面的答案中的建议更改了代码，并收到了如下屏幕所示的错误

Answer 1

如果您要在placeNameChangedHandler函数中记录“事件”，您会发现它不仅是您要查找的字符串值，而且是一个对象。因此，您要将状态设置为完整事件对象，然后尝试在屏幕上呈现它。

您需要解构对象以获得所需的字符串值。

  placeNameChangedHandler = (event) => {
    this.setState({
      placeName: event.target.value
    });
  }

Answer 2

我发现了问题：在** onPress事件处理程序上，我调用了错误的函数，对不起，我感到失望了。

React Native：道具警告，道具值无效

2 个答案: