此处为具有:focus属性的输入组件的试剂溶液。

只要这个道具设置为true，字段就会被聚焦;如果这个道具设置为false，字段就不会有焦点。

不幸的是，这个组件需要定义一个:ref，我找不到其他方法来调用.focus()。我很高兴听到建议。

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5

此处为具有:focus属性的输入组件的试剂溶液。

只要这个道具设置为true，字段就会被聚焦;如果这个道具设置为false，字段就不会有焦点。

不幸的是，这个组件需要定义一个:ref，我找不到其他方法来调用.focus()。我很高兴听到建议。

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5

在你的组件中:

constructor(props) {
        super(props);
        this.focusNextField = this
            .focusNextField
            .bind(this);
        // to store our input refs
        this.inputs = {};
    }
    focusNextField(id) {
        console.log("focus next input: " + id);
        this
            .inputs[id]
            ._root
            .focus();
    }

注意:我使用了._root，因为它是NativeBase' library ' Input中的TextInput的引用

在文本输入中，像这样

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>

你不需要裁判也可以做到。这种方法是首选的，因为引用会导致脆弱的代码。React文档建议在可能的情况下寻找其他解决方案:

If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to "make things happen" – instead, the data flow will usually accomplish your goal.

相反，我们将使用一个状态变量来聚焦第二个输入字段。

Add a state variable that we'll pass as a prop to the DescriptionInput: initialState() { return { focusDescriptionInput: false, }; } Define a handler method that will set this state variable to true: handleTitleInputSubmit() { this.setState(focusDescriptionInput: true); } Upon submitting / hitting enter / next on the TitleInput, we'll call handleTitleInputSubmit. This will set focusDescriptionInput to true. <TextInput style = {styles.titleInput} returnKeyType = {"next"} autoFocus = {true} placeholder = "Title" onSubmitEditing={this.handleTitleInputSubmit} /> DescriptionInput's focus prop is set to our focusDescriptionInput state variable. So, when focusDescriptionInput changes (in step 3), DescriptionInput will re-render with focus={true}. <TextInput style = {styles.descriptionInput} multiline = {true} maxLength = {200} placeholder = "Description" focus={this.state.focusDescriptionInput} />

这是避免使用refs的好方法，因为refs会导致更脆弱的代码:)

编辑:h/t @LaneRettig指出，你需要用一些添加的道具和方法来包装React Native TextInput，以获得对焦点的响应:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }

如果您恰好像我一样使用tcomb-form-native，您也可以这样做。这里有一个技巧:不是直接设置TextInput的道具，而是通过选项来实现。您可以将表单的字段引用为:

this.refs.form.getComponent('password').refs.input.focus()

所以最终的产品看起来是这样的:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(感谢remcoanker在这里发布的想法:https://github.com/gcanti/tcomb-form-native/issues/96)

设置第二个TextInput焦点，当前一个TextInput的onSubmitEditing被触发时。

试试这个

为第二个TextInput添加一个引用 Ref ={(input) => {this。secondTextInput =输入;}} 绑定焦点函数到第一个TextInput的onSubmitEditing事件。 onSubmitEditing={() => {this.secondTextInput.focus();}} 记住将blurOnSubmit设置为false，以防止键盘闪烁。 blurOnSubmit ={假}

当一切都完成后，它应该看起来像这样。

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>