Question

我正在尝试创建一个动态表单，用户可以在该表单中添加任意数量的书，并且每本书都有一个名称和链接。

我已经有一个按钮添加一本书并且字段已正确添加到我的表单中，但是当我键入这些字段中的任何一个时，我的输入都会失去焦点

我将books []保存在组件状态中，并且要对其进行更新，我在输入中输入了onChange={(e) => this.handleDynamicChange(e, 'fieldName', index)}。

handleDynamicChange

handleDynamicChange = (event, name, index) => {
    const { value } = event.target;

    let { books } = this.state;
    books[index][name] = value;
    this.setState({ books });
}

我对书籍链接的输入（使用材料ui）：

<TextField
    id={`edit-profile-book-link-${index}`}
    label='Link'
    value={book.link}
    onChange={(e) => this.handleDynamicChange(e, 'link', index)}
/>

我猜这是因为我要更新整个工作簿数组，所以react是重新渲染所有工作簿字段，但是我找不到使用setState()仅更新一本书的方法，所以，你呢？知道如何在动态表单中处理这些更新吗？

我已经看到了这个问题，但没有帮助： React.js - input losing focus when rerendering

我一直在检查本教程： building a dynamic controlled form

Answer 1

    let { books } = this.state;
    books[index][name] = value;

在这里，您正在变异状态，因此您不应该直接操纵状态。推荐的方法是使用the spread operator。

this.setState({ books: [...this.state.books,
                   this.state.books[index]: {...this.state.book[index], this.state.books[index][name]: value}
                ] })

React-以动态形式输入1个字符后输入失去焦点

1 个答案: