Question

我正在使用Formik来验证表单数据。作为附加验证，我检查用户电子邮件是否存在于数据库中。我可以使用此代码，但我不喜欢将其内联。有没有更好的方法可以编写此代码，因此验证不必是内联的？我不明白如何让客户通过。

    <Form className="form">
            <ApolloConsumer>
                {client => (
                    <Field className="text-input" type="email" name="email" placeholder="Email" validate={async (value) => {
                        let error

                        const response = await client.query({
                            query: USER_EXISTS,
                            variables: {
                                query: value
                            }
                        })

                        console.log(response.data.userExists)

                        if (response.data.userExists) {
                            error = 'Email taken'
                        }

                        return error
                    }} />
                )}
            </ApolloConsumer>
      <Form>

例如，如下所示：

<ApolloConsumer>
      {client => (
             <Field className="text-input" type="text" name="username" placeholder="Username" validate={this.validateUsername(client)} />
      )}
</ApolloConsumer>


validateUsername = async (value, client) => {
    let error

    const response = await client.query({
        query: USER_EXISTS,
        variables: {
            query: value
        }
    })

    console.log(response.data.userExists)

    if (response.data.userExists) {
        error = 'Username taken'
    }

    return error
}

Answer 1

似乎您需要一个HOC（高阶组件）是一个返回组件的函数，因此要抽象您的函数，您需要类似

const withApolloClient = (ConnectedComponent) => class extends React.Component {
  render() {
    return (
      <ApolloConsumer>
         {client => <ConnectedComponent {...this.props} client={client} />
      </ApolloConsumer>
    );
  }
}

一旦您设置了withApolloClient HOC，就可以按照以下方式使用它

// create a field component with validation logic
class FieldWithValidationApolloClient extends React.Component {
  async validateUsername() {
    let error;
    const { client, field } = this.props; // get apollo client injected by withApolloClient Hoc
    const { value } = field; // get value from the field


    const response = await client.query({
      query: USER_EXISTS,
      variables: {
        query: value
      }
    })

    console.log(response.data.userExists)

    if (response.data.userExists) {
      error = 'Username taken';
    }

    return error;
  }

  render() {
    return (
      <Field {...this.props} validate={this.validateUsername(client)} />
    );
  }
}

最后只需实现您的组件

// import your withApolloClient component file
import withApolloClient from './withApolloClient';
import FieldWithApolloClient from './FieldWithValidationApolloClient';
const FieldWithApollo = withApolloClient(FieldWithApolloClient);

class YourFormComponent extends React.Component {
  render() {
    return (
      <form>
        <FieldWithApollo className="text-input" type="text" name="username" placeholder="Username" />
      </form>
    );
  }
}
<form>

</form>

请记住，{...this.props}会将声明的所有属性传播到标记组件中

希望它可以为您提供帮助。

<apolloconsumer>的抽象客户端

1 个答案: