首页 文章

redux如何形成从HOC到输入元素的道具

提问于
浏览
0

我正在使用native-base(一个用于react-native的材料ui库)和redux形式来管理使用redux的表单状态 . 我对下面的代码感到困惑 . 在下面的代码中,它采用了多个参数并将其传递给带有三点的输入标记 . 但我无法确定这是什么,以及从哪里获得其他属性以及我如何应用自定义道具 .

renderInput({ input, label,  meta: { touched, error, warning } }){
    console.log(input)
    var hasError= false;
    if(error !== undefined){
      hasError= true;

    }
    return( 

      <Item error= {hasError}>
        <Input {...input} 
        />
        {hasError ? <Text>{error}</Text> : <Text />}
      </Item>
    )
  }

下面是render方法,它从redux格式的高阶字段组件调用上面的函数 .

render(){
     const { handleSubmit, reset } = this.props;
     if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <Header>
          <Body>
            <Title>Redux Form</Title>
          </Body>
        </Header>
        <Content padder>
          <Field name="email" component={this.renderInput} model="sudhakar" type="text" placeholder="Username" />
          <Field name="name" component={this.renderInput} type="password" placeholder="Password" />
          <Input name="age" type="text" ref="_age" />
          <Button block primary onPress= {this.handleLogin}
            style={{marginHorizontal:10,backgroundColor:"#00adef", marginTop:50}}
          >
            <Text>Submit</Text>
          </Button>
        </Content>
      </Container>
    )
  }

你可以找到完整的代码here

1 回答

  • 0

    我不允许发表评论,因为我的声誉低于50 .

    三点被称为spread operator,我认为这是理解你所困惑的关键 . 当我第一次看到这种语法时,我也有同样的困惑 . 尝试阅读上面的链接加上this,我想你应该能够找出你的问题:)

相关问题