0

我正在尝试更新状态，当前的 func (handleLabelChange) 理论上有效（更新状态），但我想添加名称而不是textOne和值“????” 动态地从 textarea 字段或任何其他字段。某种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>

}
4

2 回答 2

2

我会在 textarea 上做这样的事情：

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 返回回调函数，而不是回调函数

于 2019-12-20T09:49:47.027 回答
0

最后我能够解决它，如果有人有类似的问题，这是我的解决方案。

由于 TKoL 建议的函数需要 args: id, name, value, ({target: {id, value, name}})，所以在我的情况下，我需要将 id 从字符串更改为数字。

handleLabelChange = ({target: {id, value, name}}) => {
const idToNumber = Number(id);
const updatedItems = this.state.items.map(item => {
  if (item.id === idToNumber) {
    return {
      ...item,
      [name]: value
    };
  } else {
    return item;
  }
});

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

JSX

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

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

}
于 2019-12-20T13:15:13.193 回答