react-native - 我怎样才能让我以前的 TextInput 值留在盒子里反应原生？

Question

class Newsfeed extends React.Component {
    state = {
        TextInputValueHolder: '',
        button: '',
        posts: []
    };

    handlePress = () => {
        const value = this.state.TextInputValueHolder;
        this.setState({ button: value });
    }
    render() {
        return (
            <View>

                <Text style={{ fontSize: 50 }}>Junior Facebook</Text>
                <View style={{ flex: 1, flexDirection: "column" }} />
                <View style={{ top: 20, marginLeft: 0, width: 300, height: 180, backgroundColor: "lightblue" }}>
                    <TextInput
                        style={{
                            height: 150,
                            borderStyle: "solid",
                            borderWidth: 2,
                            fontSize: 30
                        }}
                        placeholder="New Post"
                        onChangeText={TextInputValueHolder =>
                            this.setState({ TextInputValueHolder })
                        }
                    />
                    <TouchableOpacity
                        onPress={this.handlePress}
                        style={{ backgroundColor: "green", marginLeft: 220, width: 80, height: 40 }}
                    >
                        <Text style={{ fontSize: 24 }}>Enter</Text>

                    </TouchableOpacity>



                </View>
                <View style={{ marginTop: 30, marginLeft: 0, width: 300, height: 180, backgroundColor: "pink" }} >
                    {/* <Text style={{fontSize: 40, marginLeft: 0, marginTop: 0, width: 300, height: 150, borderStyle: "solid", borderWidth: 2}}>{this.state.value}</Text> */}
                    <Text>{this.state.button}</Text>
                    <TouchableOpacity style={{ width: 65, height: 45, marginLeft: 260 }}><Text>Share</Text></TouchableOpacity>
                    <TouchableOpacity style={{ width: 65, height: 45, marginLeft: 220, marginTop: -45 }}><Text>Like</Text></TouchableOpacity>
                </View>
            </View>
        )
    }
}

以上是我的代码，使我的 TextInput 值出现在下面的视图组件中。但我希望我以前的 textinput 值即使在新输入之后也保留在框中。就像一个待办事项列表。我该怎么做？

请帮帮我

标签： react-native

Answer 1

您可以将按钮对象声明为数组而不是字符串，并在视图内循环以显示所有项目

class Newsfeed extends React.Component {
    state = {
      TextInputValueHolder: '',
      button: [], // Initialize your object as an array
      posts: []
    };

    handlePress = () => {
      const value = this.state.TextInputValueHolder;
      this.setState(prevState => ({ button: [...prevState.button, value] })); // Push the input value in button array
    };

    render() {
      return (
        <View>

          <Text style={{ fontSize: 50 }}>Junior Facebook</Text>
          <View style={{ flex: 1, flexDirection: 'column' }} />
          <View style={{
            top: 20, marginLeft: 0, width: 300, height: 180, backgroundColor: 'lightblue'
          }}
          >
            <TextInput
              style={{
                height: 150,
                borderStyle: 'solid',
                borderWidth: 2,
                fontSize: 30
              }}
              placeholder="New Post"
              onChangeText={TextInputValueHolder => this.setState({ TextInputValueHolder })
                        }
            />
            <TouchableOpacity
              onPress={this.handlePress}
              style={{
                backgroundColor: 'green', marginLeft: 220, width: 80, height: 40
              }}
            >
              <Text style={{ fontSize: 24 }}>Enter</Text>

            </TouchableOpacity>


          </View>
          { // Map your array here to display results
                  this.state.button.map(item => (
                    <View style={{
                      marginTop: 30, marginLeft: 0, width: 300, height: 180, backgroundColor: 'pink'
                    }}
                    >
                      <Text>{item}</Text>
                      <TouchableOpacity style={{ width: 65, height: 45, marginLeft: 260 }}><Text>Share</Text></TouchableOpacity>
                      <TouchableOpacity style={{
                        width: 65, height: 45, marginLeft: 220, marginTop: -45
                      }}
                      >
                        <Text>Like</Text>
                      </TouchableOpacity>
                    </View>
                  ))
              }
        </View>
      );
    }
}