在 React Native 中的单独组件中收集 TextInput

Question

我在 React Native 中有一些与信用卡相关的 TextInputs。我想将这些 TextInputs 收集到一个单独的组件中。

所以它看起来像

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

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

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

class AddCreditCard extends Component {
  render() {
    return (
      <View>
        <CreditCard ... />
        <Button disabled={creditCardIsInvalid} ... />
      </View>
    );
  }
}

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

我想这类似于将creditCard 对象添加到容器并将onChange 属性添加到CreditCard，所以我可以直接从CreditCard 组件填充creditCard 对象？

Answer 1

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

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