Question

我在React Native中有一些与信用卡相关的PAYPAL IDENTITY TOKEN API SIGNATURE API USER NAME API PASSWORD。我想在单独的Component中收集这些TextInput。

所以它看起来像

TextInput

在我的应用程序中，我正在导入信用卡组件并像

一样使用它

class CreditCard extends Component {
  state = { number: null, expirationMonth: null, expirationYear: null, cvc: null };

  render() {
    return (
      <View>
        <TextInput onChangeText={...} ... />
        <TextInput onChangeText={...} ... />
        <TextInput onChangeText={...} ... />
      </View>
    );
  }
}

我知道如何在信用卡组件中保存状态数据，但是如何将信用卡组件中的数据提取到容器组件（AddCreditCard）？

我想这就像向容器添加class AddCreditCard extends Component { render() { return ( <View> <CreditCard ... /> <Button disabled={creditCardIsInvalid} ... /> </View> ); } }对象和向creditCard添加onChange属性一样，所以我可以直接从{{填充creditCard对象1}}组件？

Answer 1

您可以将状态移动到AddCreditCard组件，并将prop传递给将更新容器状态的CreditCard组件。这样，您就可以通过AddCreditCard和state内的props访问CreditCard组件中的数据

class AddCreditCard extends Component {

    state = { number: null, expirationMonth: null, expirationYear: null, cvc: null };

    textFieldChanged = (key, value) => {
        let newState = {};
        newState[key] = value;
        this.setState(newState);
    }

    render() {
        return (
            <View>
                <CreditCard 
                    textFieldChanged={this.textFieldChanged} 
                    number={this.state.number} 
                    expirationMonth={this.state.expirationMonth} 
                    expirationYear={this.state.expirationYear} 
                    cvc={this.state.cvc} 
                />
                <Button disabled={creditCardIsInvalid} ... />
            </View>
        );
    }
}

然后你可以这样称呼它：

class CreditCard extends Component {
    render() {
        // this.props.number ...
        return (
            <View>
                <TextInput 
                    onChangeText={(text) => {
                        this.props.textFieldChanged('number', text)
                    }}
                />
                <TextInput 
                    onChangeText={(text) => {
                        this.props.textFieldChanged('expirationMonth', text)
                    }}
                />
                <TextInput 
                    onChangeText={(text) => {
                        this.props.textFieldChanged('expirationYear', text)
                    }}
                />
                <TextInput 
                    onChangeText={(text) => {
                        this.props.textFieldChanged('cvc', text)
                    }}
                />
            </View>
        );
    }
}

在React Native中的单独Component中收集TextInput

1 个答案: