javascript - 在 React Native 中自动提交 Redux 表单

Question

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

在文档中有一个 remote submitting 的示例，但它使用 HTML 表单的 <form onSubmit={handleSubmit}> 。在 React Native 中相当于什么？

我的尝试:当表单的输入长度>=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

您在渲染组件时调用提交操作。你不能用 react 来做到这一点。您应该使用 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);