在 React Native 中自动提交 Redux 表单

debugcn 发表于 Dev

取名

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

在文档中有一个用于远程提交的示例，但它使用的是 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`.

文森特·达穆尔

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