Question

如果指定为多行输入，则React Native TextInput组件不支持onSubmitEditing事件。

有没有办法在输入一些文字后检测用户何时按下输入/提交/发送（取决于指定的键盘布局）按钮？

Answer 1

我意识到这是一个老帖子，但我在谷歌这里偶然发现并希望分享我的解决方案。由于在提交的情况下需要发生一些事情，而不仅仅是模糊，我无法使用onBlur来解释提交。

我利用onKeyPress监听器来跟踪Enter密钥，然后继续提交。（注意，目前仅支持iOS until this PR合并。）

// handler
onKeyPress = ({ nativeEvent }) => {
  if (nativeEvent.key === 'Enter') {
    // submit code
  }
};

// component
<TextInput
  autoFocus={true}
  blurOnSubmit={true}
  enablesReturnKeyAutomatically={true}
  multiline={true}
  onChangeText={this.onChangeText}
  onKeyPress={this.onKeyPress}
  returnKeyType='done'
  value={this.props.name}
/>

请注意，仍然需要使用blurOnSubmit来阻止将返回键传递给您的onChangeText处理程序。

Answer 2

在iOS上，这应该根据文档工作。

使用onBlur功能：

文本输入模糊时调用的回调

与ios结合使用blurOnSubmit：

如果为true，则提交时文本字段将模糊。默认值为对于单行字段为true，对于多行字段为false。注意对于多行字段，将blurOnSubmit设置为true表示按下 return将模糊字段并触发onSubmitEditing事件而不是在字段中插入换行符。

我会尝试测试一下。

修改 完成测试

blurOnSubmit并不像它本应在反应原生0.14.2中那样工作。即使设置为true，返回/完成按钮和输入键也只是创建换行符而不会模糊字段。

我目前无法在新版本上测试此功能。

Answer 3

试试吧！它也在线的中间工作！

<TextInput
              placeholder={I18n.t('enterContactQuery')}

              value={this.state.query}
              onChangeText={text => this.setState({ query: text, allowEditing: true })}

              selection = {this.state.selection}
              onSelectionChange={(event) => this.setState({ cursorPosition: event.nativeEvent.selection, selection: event.nativeEvent.selection, allowEditing: true })}
              onSubmitEditing={() => {
                const { query, cursorPosition } = this.state;
                let newText = query;
                const ar = newText.split('');
                ar.splice(cursorPosition.start, 0, '\n');
                newText = ar.join('');
                if (cursorPosition.start === query.length && query.endsWith('\n')) {
                  this.setState({ query: newText });
                } else if (this.state.allowEditing) {
                  this.setState({
                    query: newText,
                    selection: {
                      start: cursorPosition.start + 1,
                      end: cursorPosition.end + 1
                    },
                    allowEditing: !this.state.allowEditing
                  });
                }
              }}
              multiline = {true}
              numberOfLines = {10}
              blurOnSubmit={false}
              editable={true}
              // clearButtonMode="while-editing"
            />
constructor(props) {
super(props);
this.state = {
  query: '',
  cursorPosition: [0,0],
  selection: null,
  allowEditing: true
}

}

Answer 4

＆＃13;

constructor () {
        super()
        this.state = {
            text : '',
            lastText : '',
            inputHeight:40
        }
    }




    writing(text){
        this.setState({
            text : text
        })
    }

    contentSizeChange(event){
        if(this.state.lastText.split("\n").length != this.state.text.split("\n").length){
            this.submitTextInput();
        }else{
            this.setState({
                inputHeight : event.nativeEvent.contentSize.height
            })
        }
    }


    submitTextInput(){
        Alert.alert('submit input  : ' + this.state.text);
        this.setState({
            text : ''
        })
    }

    render() {
        return (
            <View style={{flex:1,backgroundColor:'#fff'}}>
                <TextInput
                    style={{height:this.state.inputHeight}}
                    multiline={true}
                    onChangeText={(text) => this.writing(text)}
                    onContentSizeChange={(event) => this.contentSizeChange(event)}
                    onSubmitEditing={() => this.submitTextInput()}
                    value={this.state.text}
                />
            </View>
        );
    }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

＆＃13;

检测多行TextInput中的发送/提交按钮

4 个答案: