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

Question

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

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

Answer 1

我意识到这是一篇旧帖子，但我从 Google 偶然发现了这里并想分享我的解决方案。由于在提交的情况下需要发生一些事情，而不是简单地模糊，我无法使用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，则提交时文本字段将模糊。默认值为 单行字段为真，多行字段为假。注意 对于多行字段，将 blurOnSubmit 设置为 true 意味着按下 return 将模糊字段并触发 onSubmitEditing 事件 而不是在字段中插入换行符。

我会尝试测试一下。

编辑： 完成测试

blurOnSubmit 不像在 react-native 0.14.2 中那样工作。即使设置为 true，return/done 按钮和 enter 键也只会创建一个换行符并且不会模糊该字段。

目前我无法在较新的版本上对此进行测试。

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

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>
        );
    }

<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>