возвращение переменных из функции класса внутри мутации - PullRequest
Новая
       30

возвращение переменных из функции класса внутри мутации

0 голосов
/ 04 июня 2019

Допустим, пользователь пытается проверить некоторые данные перед отправкой запроса API.

В своей мутации я вызываю функцию класса submitForm, которая проверяет входные данные на наличие каких-либо вещей.Затем я хочу, чтобы данные из этих полей ввода передавались обратно в компонент мутации в виде variables

как это можно сделать?Вот моя попытка 

const SIGN_UP_MUTATION = gql`
  mutation signUp($username: String!, $email: String!, $password: String!) {
    signUp(username: $username, email: $email, password: $password) {
      token
    }
  }
`;

class LoginScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: null,
      email: null,
      password: null,
      formErrors: {
        userName: '',
        email: '',
        password: '',
      },
      variables: null,
    };
  }

  _submitForm = e => {
    e.preventDefault();
    const { name, value } = e.target;

    const { userName, email, password } = this.state;

    const { formErrors } = this.state;

    switch (name) {
      case 'userName':
        formErrors.userName = userName.length < 3 && userName.length > 0 ? 'minimum 3 characters required' : '';
        break;
      case 'email':
        formErrors.email = emailRegex.test(email) && email.length > 0 ? '' : 'invalid email address';
        break;
      case 'password':
        formErrors.password = password.length < 6 && password.length > 0 ? 'minimum 3 characters required' : '';
        break;
      default:
        break;
    }

    this.setState({ formErrors, [name]: value }, () => {
      console.log('this.state', this.state);
      this.variables = {
        username: this.state.username,
        email: this.state.email,
        password: this.state.password,
      };
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.logo}
          source={__DEV__ ? require('../assets/images/logo.png') : require('../assets/images/robot-prod.png')}
        />
        <View style={styles.innerContainer}>
          <TextInput
            style={styles.inputBox}
            placeholder="userName"
            name="userName"
            type="userName"
            value={this.state.userName}
            onChangeText={userName => this.setState({ userName })}
            onSubmitEditing={this._submitForm}
          />
          <TextInput
            style={styles.inputBox}
            placeholder="email"
            name="email"
            type="email"
            value={this.state.email}
            onChangeText={email => this.setState({ email })}
            onSubmitEditing={this._submitForm}
          />
          <TextInput
            style={styles.inputBox}
            placeholder="Password"
            name="password"
            type="password"
            onChangeText={password => this.setState({ password })}
            onSubmitEditing={this._submitForm}
            value={this.state.password}
          />
          <View style={styles.inputsContainer}>
            <Mutation mutation={SIGN_UP_MUTATION}>
              {({ data }) => (
                <TouchableOpacity
                  style={styles.buttonContainer}
                  onPress={e => {
                    this._submitForm(e);

                  }}
                >
                  <Text style={styles.buttonText}>Sign Up</Text>
                </TouchableOpacity>
              )}
            </Mutation>
          </View>
        </View>
      </View>
    );
  }

}

...