CODEWITHSUNDEEP
javascriptreactjsreact-nativeredux-form
NameTaken
NameTaken

Reputation: 567

Auto submit Redux Form in React Native

Anyone know how to auto submit a Redux Form in React Native when certain conditions are met? My attempt below is throwing a warning.

In the doc there is an example for remote submitting, but it's using HTML form's <form onSubmit={handleSubmit}>. What is the equivalent of this in React Native?

My attempt: Submit when the form's input length >= 2 

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.handlSubmitWrapper = this.handlSubmitWrapper.bind(this);
  }

  handlSubmitWrapper() {
    const { handleSubmit } = this.props;
    handleSubmit(() => console.log('submitting...'))();
  }

  getTextInput({ input: { onChange, value, ...otherProps }, autoSubmit }) {
    if (value && value.length > 1) {
      // triger submit
      autoSubmit();
    }

    return (
      <TextInput
        onChangeText={onChange}
        style={{height: 50, backgroundColor: '#666'}}
        {...otherProps}
        maxLength={2}
      />
    );
  }

  render() {
    return (
      <View>
        <Field name="myText" 
               component={this.getTextInput} 
               autoSubmit={this.handlSubmitWrapper} 
        />
      </View>
    );
  }
}

const MyForm = reduxForm({
  form: 'setupPasscode',
})(MyClass);

export default connect()(MyForm);

warning:

ExceptionsManager.js:71 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Upvotes: 0

Views: 1886

Answers (1)

Vincent D&#39;amour
Vincent D&#39;amour

Reputation: 3903

You are calling the submit action when rendering a component. You cannot do this with react. You should instead use the TextInput onChange method to achieve that.

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.handlSubmitWrapper = this.handlSubmitWrapper.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handlSubmitWrapper() {
    const { handleSubmit } = this.props;
    handleSubmit(() => console.log('submitting...'))();
  }

  handleInputChange(event) {
    const newText = event.nativeEvent.text;
    if (newText && newText.length > 1) {
      // triger submit
      this.handlSubmitWrapper();
    }
  }

  getTextInput({ input: { onChange, value, ...otherProps } }) {
    return (
      <TextInput
        onChange={this.handleInputChange}
        onChangeText={onChange}
        style={{height: 50, backgroundColor: '#666'}}
        {...otherProps}
        maxLength={2}
      />
    );
  }

  render() {
    return (
      <View>
        <Field name="myText" component={this.getTextInput} />
      </View>
    );
  }
}

const MyForm = reduxForm({
  form: 'setupPasscode',
})(MyClass);

export default connect()(MyForm);

Upvotes: 4

Related Questions