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

代码如下：

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;

从“React”导入React；
类EditEntry扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
条目：“”，
说明：“”，
项目：[]，
错误：null
};
this.handleChangeEntry=this.handleChangeEntry.bind（this）；
this.handlechangescription=this.handlechangescription.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
componentDidMount（）{
const{match:{params}}=this.props；
const{id}=params；
获取（`/api/entries/${id}`{
方法：“获取”
})
.then（response=>response.json（））
.那么(
数据=>{
这是我的国家({
项目：数据
});
},
错误=>{
这是我的国家({
错误
});
});
}
handleChangeEntry（e）{
this.setState（{entry:e.target.value}）；
}
手册更改说明（e）{
this.setState（{description:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
const{entry，description}=this.state；
const{match:{params}}=this.props；
const{id}=params；
获取（`/api/entries/${id}`{
方法：'放'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（条目，描述）
})
。然后（响应=>{
if（response.ok）{
window.location.assign（“/”）；
}否则{
抛出新错误（“无响应”）；
}
},
错误=>{
这是我的国家({
错误
});
});
}
render（）{
const{item}=this.state；
const itemEditForm=item.map（i=>{
返回
进入
描述
提交
});
返回(
{itemEditForm}
);
}
}
导出默认编辑条目；

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

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

有数据，有光标，但这些字段被禁用以进行编辑

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

您正在onChange处理程序方法中设置“entry”和“description”属性。但是在输入的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)}
          />

}

另外，请根据您的代码在

---

谢谢。

它几乎可以用了。我的意思是它可以工作，但只适用于只有一个输入的表单。对于两个输入，只有一个值被传递到状态（加上id）。此外，非受控组件存在问题（警告：组件正在将受控输入更改为非受控…）。我必须在代码中添加和更改：

this.entry=React.createRef（）

defaultValue={i.entry}

ref={this.entry}

与“description”相同。谢谢你的沙盒代码-它帮助了很多。哦，好的。我在沙盒中的2个输入字段中再次尝试了它，并通过一些小的调整成功地传递了值。在非受控表单的情况下可能会出现问题，但由于问题中没有提到这一点，我尝试用最少的代码复制您的问题。很高兴它有所帮助。如果你认为它有助于解决这个问题（或者至少是一个赞成票），你能把答案标记为接受吗？谢谢。是的！现在一切都好了！非常感谢你！这太简单了。我觉得很尴尬：）

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);