javascript - 如何将两个参数传递给 3rd 方组件回调属性？

Question

我需要使用内联编辑来更新信息，除了更新文本外，我还需要传输另一个记录id，但我不知道如何实现。

{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="noreferrer noopener nofollow">http://localhost:3001/cliceds/</a>" + ID 但是没有传输，告诉我如何实现。

---

编程初学者不要严格判断。

Answer 1

onFocusOut 属性的值需要是一个接收单个 text 参数的函数。

当您执行类似 onFocusOut={this._handleFocusOut(i.id)} 的操作时，您直接调用 _handleFocusOut 方法，而不是将其作为回调传递。

你可以做的是为 onFocusOut 回调提供一个匿名函数:

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

当然，您需要相应地调整您的 _handleFocusOut 方法。