Как передать два параметра в свойство обратного вызова стороннего компонента? - PullRequest
Новая
       11

Как передать два параметра в свойство обратного вызова стороннего компонента?

1 голос
/ 28 сентября 2019

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

{this.state.quotes.map((i, val ) => { 
  return(<div onClick={this.handleSubmitPlus.bind(this, i.id)} id={i.id} key={val} style={this.style.allStyle}>
  <EditableLabel text={i.texting}
    labelClassName='weightespenis'
    inputClassName='weightespenis'
    inputWidth='200px'
    inputHeight='25px'
    inputMaxLength={50}
    labelFontWeight='bold'
    inputFontWeight='bold'
    onFocus={this._handleFocus}
    onFocusOut={this._handleFocusOut}
  />
{i.all} / id:{i.id}</div>)})}

_handleFocusOut(text) {
  console.log('Left editor with text: ' + text);
  fetch("http://localhost:3001/cliceds/" + 1, {
   method: 'put',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   },
   body: JSON.stringify({texting: text})
  })
  .then(response => response.json())
  .catch(error => console.error('Error:', error)) 
}

Я думал сделать так onFocusOut={this._handleFocusOut(i.id)} и fetch("<a href="http://localhost:3001/cliceds/" rel="nofollow noreferrer">http://localhost:3001/cliceds/</a>" + ID но это не передается, подскажите как это реализовать.

Новичка в программировании не судите строго.

1 Ответ

1 голос
/ 28 сентября 2019

Значением свойства onFocusOut должна быть функция, которая получает один аргумент text.

Когда вы делаете что-то вроде onFocusOut={this._handleFocusOut(i.id)}, вы напрямую вызываете метод _handleFocusOut, вместо этогопередать его как обратный вызов.

Что вы можете сделать, это предоставить анонимную функцию для обратного вызова onFocusOut: 

<EditableLabel
    ...
    onFocusOut={(text) => this._handleFocusOut(i.id, text)}
/>

Конечно, вам нужно будет адаптировать свой _handleFocusOut метод соответственно.

...