Question

我想首先自动聚焦redux字段。我尝试了很多不同的选项，但没有一个可行。因此，无论何时创建表单，它都应该关注第一个字段。

           <Field
              name={'Email'}
              label="Email *"
              onFocusCb={this.hideDoneButton}
              component={FormInput}
              containerStyle={styles.inputStyle}
              clearButtonMode={'always'}
              autoCorrect={false}
          />

我在类之外创建了组件{FormInput}。以下是相同的代码。

const FormInput = props =>
(<View style={props.containerStyle}>
<FormTextInput
    autoFocus={true}
    multiline
    style={props.style}
    autoCapitalize={props.autoCapitalize}
    clearButtonMode={props.clearButtonMode}
    selectionColor={props.selectionColor}
    value={props.input.value}
    onFocus={props.onFocusCb}
    keyboardType={props.keyboardType}
    label={props.label}
    placeholder={props.placeholder}
    defaultValue={props.defaultValue}
    onChangeText={text => props.input.onChange(text)}
    onEndEditing={() => {
      if (props.onEndEditing) {
        props.onEndEditing();
      }
      if (props.input.onEndEditing) {
        props.input.onEndEditing();
      }
    }}
/>
</View>);

Answer 1

您可以使用HTML5属性autoFocus。此解决方案与Redux表单无关。

<Field
          autoFocus
          name={'Email'}
          label="Email *"
          onFocusCb={this.hideDoneButton}
          component={FormInput}
          containerStyle={styles.inputStyle}
          clearButtonMode={'always'}
          autoCorrect={false}
      />

有多种方法可以在Redux表单中执行此操作，例如设置道具ref，withRef，使用getRenderedComponent()然后调用.focus()，但是对于这种简单行为我们不清楚只使用autoFocus会带来什么好处。

如何自动对焦redux字段

1 个答案: