исх обратного вызова применяется к первому классу соответствия

Question

У меня есть простой компонент, который имеет рендер, как это:

render: function(){ 
     return (
      <textarea className="wmd-input" id="wmd-input" ref={this.initiatePagedown}></textarea> 
     ) 
} 

initiatePagedown: function(input){ 
     //code that initiates markdown editor. 
     attr = $(input).attr('id').split('wmd-input')[1]; 
     converter = new Markdown.Converter(); 
     Markdown.Extra.init(converter, {highlighter: "highlight"}); 
     editor = new Markdown.Editor(converter, attr); 
     return editor.run();  
    }, 

Компонентные монтирует п разное время, следовательно, создание нескольких текстовых областей.

Проблема заключается в том, что обратный вызов ref работает с входом первого компонента, поэтому всегда используется первый компонент, а не тот, который я выбираю. Итак, предположим, что этот компонент был установлен дважды, тогда обратный вызов ref будет вызываться в первом экземпляре компонента дважды, а не один раз из каждого экземпляра компонента. Как решить эту проблему?

Answer 1

Вы используете редактор PageDown, чтобы указать на определенный элемент ID на странице, потому что вы передаете во втором аргументе, attr:

new Markdown.Editor(converter, attr); 

the documentation Заканчивать на втором аргументе Markdown.Editor конструктор:

Если задано, этот аргумент является строка, то добавляется к HTML идентификаторам элементов из трех элементов, используемых в редакторе ... так что вы можете создать второе поле ввода в <textarea id="wmd-input-2"> и передать строку " -2 ", поскольку второй аргумент конструктору.

Прямо сейчас вы всегда создает редактор с тем же ID:

id="wmd-input" 

Так конструктор редактор всегда будет соответствовать каждый существующий экземпляр этого ID на странице.

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

return (
    <textarea id={ `wmd-input-${ this.props.id }` } ... /> 
) 

Тогда вы можете создать экземпляр неудачный API с чем-то вроде

editor = new Markdown.Editor(converter, `-${ this.props.id }`);