React - 表单 - 无法更新/编辑输入/文本区域中的值 - 写入禁用

Question

代码如下：

import React from 'react';

class EditEntry extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            entry: '',
            description: '',
            item: [],
            error: null
        };

        this.handleChangeEntry = this.handleChangeEntry.bind(this);
        this.handleChangeDescription = this.handleChangeDescription.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        const { match: { params } } = this.props;
        const { id } = params;
        fetch(`/api/entries/${id}`, {
            method: 'GET'
        })
            .then(response => response.json())
            .then(
                data => {
                    this.setState({
                        item: data
                    });
                },
                error => {
                    this.setState({
                        error
                    });
                });
    }

    handleChangeEntry(e) {
        this.setState({ entry: e.target.value });
    }

    handleChangeDescription(e) {
        this.setState({ description: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();

        const { entry, description } = this.state;
        const { match: { params } } = this.props;
        const { id } = params;

        fetch(`/api/entries/${id}`, {
            method: 'PUT',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(entry, description)
        })
            .then(response => {
                if (response.ok) {
                    window.location.assign("/");
                } else {
                    throw new Error('No response.');
                }
            },
                error => {
                    this.setState({
                        error
                    });
                });
    }

    render() {

        const { item } = this.state;

        const itemEditForm = item.map(i => {
            return <div key={i.id}>
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="entry">Entry</label>
                        <input
                            id="entry"
                            name="entry"
                            type="text"
                            className="form-control"
                            required
                            value={i.entry}
                            onChange={this.handleChangeEntry} />
                    </div>
                    <div className="form-group">
                        <label htmlFor="description">Description</label>
                        <textarea
                            id="description"
                            name="description"
                            type="text"
                            className="form-control"
                            required
                            rows="5"
                            value={i.description}
                            onChange={this.handleChangeDescription} />
                    </div>
                    <button type="submit" className="btn btn-secondary btn-sm mb-sm-2">Submit</button>
                </form>
            </div>
        });

        return (
            <div>
                {itemEditForm}
            </div>
        );
    }
}

export default EditEntry;

我无法编辑包含在的数据：

<input id="entry" (...) />
<textarea id="description" (...) />

有数据，有光标，但这些字段无法编辑。

我从数据库 (componentDidMount()) 中获取一个包含一个对象的数组。我知道还有另一种方法可以访问对象中包含的数据。但是在这个项目中这种方式是行不通的。虽然在我的另一个项目中它有效。奇怪。

Answer 1

您正在 onChange 处理程序方法中设置“条目”和“描述”属性。但在输入的 value 属性中使用 i.entry 和 i.description。请尝试更改它，也许如果您在项目数组中有多个项目，您可以尝试像下面这样来处理状态。

组件：

<input
            id="name"
            name="name"
            type="text"
            className="form-control"
            required
            value={i.name}
            onChange={(e) => this.handleChangeName(e, i.id)}
          />

JS：

handleChangeName(e, id) {
console.log(e.target.value);
const newState = {
  item: this.state.item.map((x) =>
    x.id != id ? x : { id: id, name: e.target.value }
  )
};
this.setState(newState);

}

另外，请在CodeSandbox Link上找到一个基于您的代码的工作示例

谢谢。