Как мне ввести текст и сделать так, чтобы мой текст отображался в поле ниже в React native?

Question

class Newsfeed extends React.Component{
  render(){


  return (

    <View style={{alignItems: "center"}}>
    <Text style={{fontSize: 50}}>Junior Facebook</Text>
    <TextInput style={{borderStyle: "solid", borderWidth: 2, marginLeft: 650, width: 200, height: 40}} value="Search"></TextInput>
      <View>
      <Image source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'}} style={{width: 120, height: 200, marginLeft: 120, marginTop: 80}} />
      <View style={{flex: 1, flexDirection: "row"}} />
      <View style={{top: -200, marginLeft: 240, width: 700, height: 200, backgroundColor: "lightblue"}}>
      <TextInput placeholder="New Post" style={{fontSize: 40, width: 700, height: 150, borderStyle: "solid", borderWidth: 2}} />
      <Button style={{width: 65, height: 45, marginLeft: 635 }} title="Enter"></Button> 
      </View>
      <View style={{marginTop: -199, marginLeft: 120, width: 820, height: 300, backgroundColor: "pink"}} >
      <Image source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'}} style={{width: 120, height: 200, marginLeft: 0, marginTop: 0}} />
      <Text style={{fontSize: 40, marginLeft: 120, marginTop: -200, width: 700, height: 240, borderStyle: "solid", borderWidth: 2}}></Text>
      <Button style={{width: 65, height: 45, marginLeft: 755}} title="Share"></Button>
      <Button style={{width: 65, height: 45, marginLeft: 688, marginTop: -45}} title="Like"></Button>
      </View>
    </View>
    </View>
  )
  }
}

Когда я набираю текст в компоненте TextInput, как я могу сделать так, чтобы мой текст отображался в поле ниже? Я знаю, что мне нужно реализовать функцию внутри класса Newsfeed, но теперь я знаю, как это сделать. Пожалуйста, помогите мне!

Answer 1

class Newsfeed extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: ''
        };
    }
    render() {
        return (
            <View style={{ alignItems: 'center' }}>
                <Text style={{ fontSize: 50 }}>Junior Facebook</Text>
                <TextInput
                    onChangeText={(v) => this.setState({ inputValue: v })}
                    style={{ borderStyle: 'solid', borderWidth: 2, marginLeft: 650, width: 200, height: 40 }}
                    value={this.state.inputValue}
                />
                <Text>{this.state.inputValue}</Text>
            </View>
        );
    }
}