Question

任何人都知道在满足某些条件时如何在React Native中自动提交Redux表单？我在下面的尝试是发出警告。

在文档中有remote submitting的示例，但它使用的是HTML表单<form onSubmit={handleSubmit}>。 React Native中的等价物是什么？

我的尝试：在表单的输入长度＆gt; = 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);

警告：

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`.

Answer 1

渲染组件时调用提交操作。你不能做出反应。您应该使用TextInput onChange方法来实现它。

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);

在React Native中自动提交Redux表单

1 个答案: