TextInput игнорирует двойное нажатие (точка) на React Native - PullRequest
Новая
       8

TextInput игнорирует двойное нажатие (точка) на React Native

0 голосов
/ 08 мая 2018

У меня есть компонент TextInput, в котором он изменяет состояние при вводе пользователем, но я понимаю, что из-за значения TextInput, использующего this.state.text в качестве значения, двойное нажатие на пробел не приводит к появлению точки на iO.

Есть ли способ обойти это, так что двойное нажатие на пробел все еще может производить период на ios? 

 onChange =(text) => {
    this.setState({text});
 }




<TextInput
          onChangeText={this.onChange}
          onSubmitEditing={this.onSubmit}
          value={this.state.text}
          autoCapitalize="sentences"
          blurOnSubmit={false}
          editable={true}
        />

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Событие onChange в поле textInput вызывает проблемы, например, Сочетания клавиш (двойное нажатие на пробел для создания точки (.)), Так как состояние изменяется при каждом нажатии клавиши, и клавиатура не может захватить двойное пространство.

Таким образом, вместо сохранения значения в состоянии, я просто фиксирую его на SubSiteEditing, фиксируя окончательные значения. 

   <TextInput
      onSubmitEditing={this.onSubmit}
      value={this.state.text}
      placeholder="Say Something.."
      blurOnSubmit={false}
      editable={true}
    />

Затем мы создаем функцию отправки, которая делает что-то с текстом и очищает поле. 

  onSubmit = (e) => {

    const text = e.nativeEvent.text;

    this.setState({text}, () => { // <- Important Callback after setstate

          //Whatever U want to do with the data here.

          this.setState({text: ''}) // clear the field (this must be in the callback)

    })
  }

Мы устанавливаем this.state.text в текст, чтобы мы могли установить его обратно в '' после Перезвоните. Если вы не сделаете этот шаг, состояние не изменится, и компонент не обновляется с пустым полем.

Я понимаю, что с помощью этого метода все функции клавиатуры будут работать в обычном режиме, включая двойной пробел для точек (.) И даже копирование и вставку значений без использования setState.

Обновление: решение с поддержкой нескольких строк.

Вышеприведенное работает для одной строки, для многострочного, когда мы не используем onSubmitEditing и вместо этого используем кнопку, нам нужно добавить ссылку для ввода текста. 

    <TextInput
      ref={input => { this.textMessage = input }} //Important.
      //onSubmitEditing={this.onSubmit} //Remove so we can use newline
      value={this.state.text}
      placeholder="Say Something.."
      blurOnSubmit={false}
      editable={true}
      multiline={true}
    />

Создать кнопку, которая выполняет отправку 

<Button onPress={this.onSubmit} 
  title="Send"
/>

Есть другой способ получить значение через ссылку для функции onSubmit 

  onSubmit = () => {

    const text = this.textMessage._lastNativeText.trim(); //Remember the ref from textInput?
    this.setState({text}, () => {
       //Do whatever u want with the text here
       this.setState({text: ''}) //clear the field
       this.textMessage._lastNativeText = ''; //you need to clear this too
    })

Примечание: если вы не установите this.textMessage._lastNativeText пустым, вы будет продолжать отправлять предыдущее значение, когда вы нажмете кнопку Отправить Кнопка, хотя textInput выглядит визуально пустым.

0 голосов
/ 09 мая 2018 
import React, { Component } from 'react';
import { AppRegistry, TouchableOpacity, View, TextInput } from 'react-native';

class UselessTextInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lastPress: 0
        }
    }

    onPress = () => {
        var delta = new Date().getTime() - this.state.lastPress;

        if (delta < 200) {
            alert("DOUBLE TAP")
            // double tap happend
        }

        this.setState({
            lastPress: new Date().getTime()
        })
    }

    render() {
        return (
            <TouchableOpacity onPress={this.onPress}>
                <TextInput
                    pointerEvents="none"
                />
            </TouchableOpacity>
        );
    }
}

export default class UselessTextInputMultiline extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Useless Multiline Placeholder',
        };
    }

    // If you type something in the text box that is a color, the background will change to that
    // color.
    render() {
        return (
            <View style={{
                backgroundColor: this.state.text,
                borderBottomColor: '#000000',
                borderBottomWidth: 1
            }}
            >
                <UselessTextInput
                    multiline={true}
                    numberOfLines={4}
                    onChangeText={(text) => this.setState({ text })}
                    value={this.state.text}
                />
            </View>
        );
    }
}

// skip these lines if using Create React Native App
AppRegistry.registerComponent(
    'AwesomeProject',
    () => UselessTextInputMultiline
);

Вы можете отредактировать его в соответствии с вашими требованиями. Я пробовал его на сайте реакции на родную документацию, и он работал.

...