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

时间:2018-05-30 06:31:39

标签: react-native redux react-redux redux-form

我使用带有redux形式的native-base(一个用于react-native的材料ui库)来管理使用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 :(得分:0)

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

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