代码之家  ›  专栏  ›  技术社区  ›  Adam McGurk

如何获取另一个文件中组件的状态

  •  0
  • Adam McGurk  · 技术社区  · 6 年前


    我有一个屏幕,它本质上是一个表单,但所有组件都位于不同的文件中(通常是这样)。还有我不能理解的(我在网上搜索了如下问题: How to get state of custom react component from parent

    const stateValue = document.querySelector('#thingIWantToGetTheValueOf').value;
    

    但据我所知,你不能在家里这样做。下面是我正在使用的代码,然后我将其简化为一个问题:

    // SubmitReferralScreen.js
          <PageTemplate headerText='New Referral' needsBackButton='true' navBar='true' needsFocus='Referrals'>
                <KeyboardAvoidingView behavior='padding' style={styles.formContainer}>
                  <View style={styles.inputContainer}>
                    <GeneralInput autoFocus='true' labelText='Referral Name' type='default' placeholder='Full Name' />
                    <GeneralInput labelText='Phone Number' type='phone-pad' placeholder='(555) 123-4567' />
                    <Picker selectedValue={this.state.relationship} onValueChange={(itemValue, itemIndex) => this.setState({relationship: itemValue})} style={styles.picker}>
                      <Picker.Item label='Friend' value='friend' />
                      <Picker.Item label='Family Member' value='family' />
                      <Picker.Item label='Select' value='' />
                      <Picker.Item label='Co Worker' value='coworker' />
                    </Picker>
                    <GeneralInput labelText='Email' type='email-address' placeholder='email@shinesolar.com' />
                  </View>
                  <IconButton navigateTo='YayReferral' buttonText='Submit Referral' />
                </KeyboardAvoidingView>
          </PageTemplate>
    


    // GeneralInput.js
    export class GeneralInput extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                placeholder: this.props.placeholder,
                inputValue: "",
                inputting: false,
            };
         }
        whenInputIsFocused() {
            this.setState({placeholder: ""});
        }
        whenInputIsBlurred() {
            if (this.state.inputValue === "") {
                this.setState({placeholder: this.props.placeholder});
            }
        }
      render() {
        const autoFocus = this.props.autoFocus == 'true';
        return(
            <View style={styles.outerContainer}>
                <Text style={styles.labelText}>{this.props.labelText}</Text>
                <TextInput 
                    autoCapitalize='none' 
                    autoFocus={autoFocus}
                    onChangeText={(inputValue) => this.setState({inputValue})}
                    value={this.state.inputValue} 
                    secureTextEntry={this.props.secureTextEntry} 
                    onBlur={this.whenInputIsBlurred.bind(this)} 
                    onFocus={this.whenInputIsFocused.bind(this)} 
                    underlineColorAndroid="transparent" 
                    keyboardType={this.props.type} 
                    returnKeyType={this.props.returnKeyType} 
                    placeholder={this.state.placeholder} 
                    placeholderTextColor='rgba(255, 255, 255, 0.3)' 
                    style={styles.inputStyles} />
            </View>
        );
      }
    }
    

    在SubmiterFerralScreen中,当 IconButton 按下时,我想收集所有GeneralInputs(和选择器)的值,如果它们通过一些验证,则提交表单。但是,由于状态更改函数保存在GeneralInput.js中,我不知道如何访问这些组件的状态。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Petrogad    6 年前

    要实现这一点,请在 <GeneralInput> 组件,您需要实现一个函数,该函数传回数据并在父级中设置有状态信息。

    然后,您可以决定在何处管理状态 GeneralInput ,它只是将值传回(在状态更改时)给父级,或者如果父级管理它。

    此外,我相信您可以使用 ref

    在父控制器中:

    <GeneralInput
       autoFocus='true'
       labelText='Referral Name'
       type='default'
       placeholder='Full Name'
       onChange={this.handleChange} //added line
     />
    
    // class method outside of render
    onChange = ({key, value}) => { 
        this.setState({key, value});
    }
    

    //GeneralInput.js

    <TextInput 
      onChangeText={this.storeValue}
      ...
    />
    
    //outside of render method
    storeValue = (inputValue) => {
       this.setState({inputValue})
       this.props.onChange({key: 'myField', value: inputValue})
    }