Блог

Главная - Вопросы по программированию - Как добавить текст в TextInput после завершения редактирования React Native

Как добавить текст в TextInput после завершения редактирования React Native

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

У меня есть URL TextInput в моем приложении react native. Когда пользователь вводит URL без указания протокола URL (например, ‘www.google.com ‘) Мне нужно автоматически добавить к нему ‘http: //’ (http://www.google.com ) после завершения ввода пользователем. Вот мой код:

           onChangeText={url => {
               this.setState({ classUrl: url });
          }}
          onEndEditing={() => {
            if (this.state.classUrl.indexOf('http') === -1) {

              this.setState(
                { classUrl: `http://${this.state.classUrl}` },
                () => {
                  console.log(this.state.classUrl)
                }
              );
            }
          }}
         value={this.state.classUrl}

Состояние моего компонента изменяется, и он обновляет URL, однако изменения не отображаются в пользовательском интерфейсе.

Комментарии:

1. Почему бы просто не установить состояние по умолчанию на http:// ?

2. Сделаю так, если не смогу найти никакого другого решения. Интересно, почему состояние обновляется, а value prop — нет.

Ответ №1:

Вы можете добавить onEndEditing —>ссылку

 <TextInput
    onChangeText={url => {
        this.setState({ classUrl: url });
    }}
    onEndEditing ={()=> {
        this.setState({ classUrl: 'https' this.state.classUrl });
    }}
/>

Комментарии:

1. Пробовал этот способ, результат тот же .. URL обновляется, но значение TextField prop не обновляется. Если я сохраню и снова открою свой компонент, он будет отображаться правильно.

2. попробуйте это onEndEditing , как предложено выше

3. попробуйте это onEndEditing , как предложено выше

4. это то, что я использую. Смотрите фрагмент кода в моем вопросе