React-Native：访问另一个 class 中的 TextField 值

Question

作为一名 iOS 开发者，我在 React Native 方面遇到了一些困难。

我有两个不同的组件类:

组件 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>
        );}
}

组件 B 在其视图中使用 A

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>
            );}
    }

如何使用 A 中 TextInput 的值从 B 访问 value/state 以在按下按钮时显示它？

Answer 1

在 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>
      );}
}

通过 ref 属性访问 class A 的引用，然后获取它自己的状态。

React-Native：访问另一个 class 中的 TextField 值

React-Native: Access TextField value in another class

javascript

textinput

ios

react-native