React-Native: Access TextField value in another class

Question

As an iOS dev I'm struggling a bit with react native.

I have two components inside different classes:

Component A is a view with a TextInput

class A extends Component<Props>{
    state = {
        textFieldValue: ""
    };  
    render() {
        return (
            <View>
                <TextInput placeholder={this.props.placeholderText}
                            ref={textField => {
                                this.textField = textField;
                            }}
                            value={this.state.textFieldValue}
                            onChange={e => this.setState({ textFieldValue: e.target.value})}/>
            </View>
        );}
}

Component B uses A in it's view

class B extends Component<Props>{
        render() {
            return (
                <View>
                   <A placeholder={"test"}/>
                   <TouchableOpacity onPress={() => {
                                //show text of input A here
                            }}>
                        <View>
                            <Text>{text}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            );}
    }

How can I access the value/state with the value of the TextInput in A from B to show it on the button press?

stackoverflow.com/questions/43168994/…

jgoday
– jgoday

2019-03-21 12:37:10 +00:00
Commented Mar 21, 2019 at 12:37 — jgoday
– jgoday, Commented Mar 21, 2019 at 12:37

Mervzs · Accepted Answer · 2019-03-21 12:43:00Z

1

Try this on Class B

    class B extends Component<Props>{
  render() {
      return (
          <View>
             <A placeholder={"test"} ref={c => this.textRef = c}/>
             <TouchableOpacity onPress={() => {
                          //show text of input A here
                          alert(this.textRef.state.textFieldValue)
                      }}>
                  <View>
                      <Text>{text}</Text>
                  </View>
              </TouchableOpacity>
          </View>
      );}
}

Access reference of class A through ref props, then get its own state.

answered Mar 21, 2019 at 12:43

Mervzs

1,1548 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arnoapp Over a year ago

this was my guess too but it returns undefined

arnoapp Over a year ago

Ok I used onChange instead of onChangeText... it works now

Collectives™ on Stack Overflow

React-Native: Access TextField value in another class

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related