Question

在较旧的react-native版本中，以下代码用于工作。但是现在在v0.45.1我收到SecondInput.focus不是函数的错误。

 <TextInput 
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title"
      onSubmitEditing={(event) => { 
        this.refs.SecondInput.focus(); 
      }}
    />
    <TextInput
      ref='SecondInput'
      style = {styles.descriptionInput}          
      multiline = {true}
      maxLength = {200}
      placeholder = "Description" />

更新：问题似乎是Redux-form。

Answer 1

尝试ref的最新回调模式，并检查它是否正常工作，

在课程组件

中

<TextInput 
  style = {styles.titleInput}
  returnKeyType = {"next"}
  autoFocus = {true}
  placeholder = "Title"
  onSubmitEditing={(event) => { 
    this.secondInput.focus(); 
  }}
/>
<TextInput
  ref={secondInput => this.secondInput = secondInput}
  style = {styles.descriptionInput}          
  multiline = {true}
  maxLength = {200}
  placeholder = "Description" 
/>

在功能组件而不是this.secondInput中，只声明变量secondInput并在没有'this'的情况下使用。

希望这有效......

Answer 2

以下是关注文本框的示例示例

           class CustomTextInput extends React.Component {
              constructor(props) {
                super(props);
                this.focus = this.focus.bind(this);
              }

              focus() {
                // Explicitly focus the text input using the raw DOM API
                this.textInput.focus();
              }

              render() {
                // Use the `ref` callback to store a reference to the text input DOM
                // element in an instance field (for example, this.textInput).
                return (
                  <div>
                    <h1>Click for focus</h1>
                    <hr />
                    <div>
                    React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

                    When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument. For example, this code uses the ref callback to store a reference to a DOM node:
                    </div>
                    <br/>
                    <input type="text" value="no focus" className="form-control"/>
                    <br/>
                    <input
                      type="text"
                      ref={(input) => { this.textInput = input; }} className="form-control"/>
                      <br/>
                    <input
                      type="button"
                      value="Focus the text input"
                      onClick={this.focus}
                      className="btn btn-sm btn-primary"
                    />
                  </div>
                );
              }
            }

            export default CustomTextInput

焦点不是一个功能反应原生

2 个答案: