Question

社区

我正在尝试建立一个表，其中的行根据对象数组呈现：

this.state = {
  tableContent: [
    { 
      id: this.state.tableContent.length,
      firstname:"",
      lastname:""
    },
    ...
  ]

每一行显示一个对象。（在这种情况下为2列，n行）每个单元格也是一个输入字段，因此用户可以操纵该表：

<tbody>
  {this.state.tableContent.map((row) => {
    return(
      <tr key={row.id}>
        <td><input value={row.firstname} onChange={this.handleFirstNameChange}> </input></td>
        ...
      </tr>
    )
  })}
</tbody>

我希望每个单元格/输入字段在用户更改输入值以及状态时显示更改。因为我正在用value={row.firstname}填充输入字段，所以我需要定义一个onChange处理函数，该函数会更改目标对象的firstname属性的状态/值。

那么我的onChange处理函数是什么样的？我尝试使用点差，但到目前为止无济于事...

一些想法：使用标准过程不起作用，因为我有一个嵌套状态（对象数组）：

handleChange = (event) => { this.setState({ firstname: event.target.value }) }

尝试使用传播运算符也会导致一些奇怪的混乱：（这里的代码有些错误：也许您可以解决？）

handleFirstNameChange = (event) => {
    const {tableContent} = {...this.state};
    const currentState = tableContent;
    const { firstname, value } = event.target;
    currentState[0] = value;
    this.setState({ tableContent: currentState});
  }

感谢您的帮助！

编辑：下面的代码似乎几乎可以工作。（感谢@Nikhil）但是，现在，每当用户在输入字段中键入内容时，他们键入的每个字母都将替换现有的'row.firstname'字母/值。同样，状态不会自动刷新，因此只有最后键入的字母才会显示/保留。我需要输入字段具有的功能就像任何临时输入字段一样。 event.persist（）;似乎需要保留事件值。

handleFirstNameChange = (id, event) => {
    event.persist(); 
    this.setState(prevState => {
      tableContent : prevState.tableContent.forEach((row) => {
        if(row.id === id) { row.firstname = event.target.value}
      })
    })
  }

输入看起来像这样：

onChange={(event) => this.handleWNRChange(row.id,event)}

Answer 1

我认为类似的方法会起作用。

const handleFirstNameChange = (id, event) => {
    event.preventDefault();
    const {tableContext} = this.state;

    const myRowIndex = tableContext.findIndex((row) => row.id === id);
    tableContext[myRowIndex].firstname = event.target.value;

    this.setState({ tableContext });
}

这应该是您所需要的。只需将此方法分配给onChange元素的input。像这样：

onChange={(event) => this.handleFirstNameChange(row.id, event)}

Answer 2

也许这会有所帮助

import java.util.Scanner;

class Book implements Comparable<Book> {
    int id;
    String title;
    String folder;
    int pages;

    public int compareTo(Book other) {
        return title.compareTo(other.title);
    }
}

public class Practice {

    public static void main(String[] args) throws Exception {

        Scanner sc = new Scanner(System.in);
        Book b1 = new Book();
        Book b2 = new Book();
        Book b3 = new Book();
        Book b[] = { b1, b2, b3 };
        for (int i = 0; i < b.length; i++) {
            b[i].id = sc.nextInt();
            sc.nextLine();
            b[i].title = sc.next();
            sc.nextLine();
            b[i].folder = sc.next();
            b[i].pages = sc.nextInt();
        }
        Book temp = null;
        for (int i = 0; i < b.length; i++) {
            for (int j = 0; j < b.length - 1 - i; j++) {
                if (b[i].compareTo(b[j]) < 0) {
                    temp = b[j];
                    b[j] = b[j + 1];
                    b[j + 1] = temp;
                }
            }
        }
        for (int i = 0; i < b.length; i++) {
            System.out.println(b[i].id + " " + b[i].title + " " + b[i].folder + " " + b[i].pages);
        }

    }
}

如何处理数组内对象的onChange（反应状态）？

2 个答案: