我想在React

时间:2018-12-29 18:23:16

标签: javascript reactjs frontend

我想通过事件进行更改,以便用户可以直接修改表中的值。 当前数据与MongoDB链接。 但是,如果在当前TextField中发生onchange事件,则其值将不会正常更改。 我们应该如何解决?

我试图通过将事件声明为函数而不是变量来绑定事件,但是它没有用。

const handleChange = (e, name, i) => {
  const { value } = e.target;
  this.setState(state => ({
    data: state.data.map(
        (row, j) => (j === i ? { ...row, [name]: value } : row)
    )
  }));
};

const row = (
  x,
  i,
  header,
  startEditing,
  editIdx,
  handleChange,
  handleRemove,
  stopEditing
) => {
  let currentlyEditing = editIdx === i;
  return (
    <TableRow key={`tr-${i}`} selectable= 'false'>
      {header.map((y, k) => (
        <CustomTableCell key={`trc-${k}`}>
          {currentlyEditing ?
            <TextField
              name={y.prop}
              onChange={e => handleChange(e, y.prop, i)}
              value={x[y.prop]}
            />
           :
            x[y.prop]
          }
        </CustomTableCell>
      ))}
      <CustomTableCell>
        {currentlyEditing ? (
          <CheckIcon onClick={() => stopEditing()} />
        ) : (
          <EditIcon onClick={() => startEditing(i)} />
        )}
      </CustomTableCell>
      <CustomTableCell>
        <TrashIcon onClick={() => handleRemove(x)}/>
      </CustomTableCell>
    </TableRow>
  );
};

我认为代码现在似乎可以更改数组的值。 但是,数据是从MongoDB传递到对象的。 那么,如果需要更改对象中该行中字段的值怎么办?

0 个答案:

没有答案