Autosuggest при вводе определенного символа с ReactJS

Question

Так что, когда вы используете facebook, если вы введете @symbol, то знаете, что хотите установить ссылку на друга/страницу. Я собираю пользовательский интерфейс, который позволяет пользователям выделять текст из древних документов. То, что я хотел бы сделать, это если пользователь выделяет слово или помещает символ @ # ~ £ перед словом, он выдает всплывающее окно с автозагрузкой или опциями. Поэтому, если я набрал «Это документ, связанный с @name», когда я набрал @name, он предлагает имена или места и т. Д., На самом деле мне понадобится его, чтобы открыть другой модальный способ, чтобы вы могли ввести дополнительную информацию об этом пользователе/​​месте/элементе ,

Мне интересно, если это что-то, что может быть достигнуто с помощью ReactJS из документации, я не могу найти эту функциональность из коробки, любые указатели, полученные с большим удовольствием.

Answer 1

Конечно, это возможно. Я не буду использовать фактический синтаксис, но я укажу вам в правильном направлении.

Скажите, что у вас есть ваш компонент поиска/ввода.

Это функция визуализации будет выглядеть примерно так:

render: function(){ 
    return (<div> 
      <input onChange={this.onChange}></input> 
      <SuggestionsList data={this.state.value} show={this.state.autoSuggest}></SuggestionsList> 
      <div>); 
} 

Теперь давайте создадим функцию OnChange, чтобы установить состояние, чтобы показать автозаполнение, когда мы хотим его:

onChange: function(val){ 
    var state = {value: val}; 
    if(val[0] === '@'){ 
     state.autoSuggest=true; 
    } 
    this.setState(state); 
} 

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

Обратите внимание, что вам не нужно использовать этот точный шаблон, возможно, правильнее не возвращать список предложений вообще, если вы не хотите показывать какие-либо предложения, но это зависит от вас.

Я предлагаю вам следовать facebook в комментарии учебник здесь: http://facebook.github.io/react/docs/tutorial.html

Где они динамически получить комментарии от сервера и обновления. Это, по сути, та же картина.