javascript - React，使用目标名称和值从 map 更新状态函数

Question

我正在尝试更新状态，当前的 func (handleLabelChange) 理论上可以工作(更新状态)，但我想添加名称而不是 textOne 和值 ”？？？ ?" 动态地从文本区域字段或任何其他字段。某种 target.name 和 target.value，但我不知道如何处理它。

handleLabelChange = id => {
const updatedItems = this.state.items.map(item => {
  if (item.id === id) {
    return {
      ...item,
      textOne: "????"  // grab textarea name and value here 
    };
  } else {
    return item;
  }
});

this.setState({
  items: updatedItems
});

};

JSX 内部 map 函数:

{this.state.items.map(el => (

<textarea rows="5" placeholder="Text here..." name="textOne" onChange={() => this.handleLabelChange(el.id)}></textarea>

}

Answer 1

我会在文本区域上做这样的事情:

onChange={this.handleLabelChange(el.id, 'name')}

其中第二个参数是属性，然后handleLabelChange看起来像这样

function handleLabelChange(id, property) {
  return ev => {
    const newVal = ev.target.value;

    const updatedItems = this.state.items.map(item => {
      if (item.id === id) {
        const newItem = Object.assign({}, item);
        newItem[property] = newVal;
        return newItem;
      } else {
        return item;
      }
    });

    this.setState({
      items: updatedItems
    });
  }
}

您的handleLabelChange返回回调函数，而不是本身回调函数