在完成显示初始数据后，react-bootstrap 编辑模态中的输入字段

Question

TL DR摘要：我有一个显示成员列表的表格。我单击一行，它会呈现一个模态，其中包含该特定用户的更多信息。现在，我需要能够编辑模态中的输入字段并保存回数据库中。

Full Scenario:

我正在使用react-bootstrap来呈现一个Modal，用于显示有关最初显示在HTML表行中的成员的其他数据。

当我单击该行时，将显示Modal并将所有其他详细信息呈现到相应的input字段中。

从父类(这只是MemberModal上方的同级类)中，我像这样渲染Modal。selectedMember状态变量包含需要显示其其他详细信息的用户。

<MemberModal
show={this.state.showMemberModal}
onHide={closeMemberModal}
selectedmember={this.state.selectedMember}
/>

这是我MemberModal课：

class MemberModal extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
};
}
componentDidMount() {
this.setState({ member: this.props.selectedmember.firstName });
}
handleFirstNameChange = e => {
this.setState({ firstName: e.target.value });
};
};
render() {
return (
<div className="static-modal">
// Abstracted some Modal design JSX code .......
<input
value={this.props.selectedmember.firstName}
type="text"
className="form-control"
id="FirstName"
aria-describedby="FirstName"
placeholder=""
name="email"
onChange={this.handleFirstNameChange}
/>
</div>
</div>
);
}
}

我遇到的问题是其他详细信息非常准确地显示在Modal中，但我无法对其进行编辑。每次我输入新字符/删除时，它可能都会触发onChange但输入字段仍然保持显示加载它的旧值。

更新 1：粘贴完整代码

Answer 1

我看到您的MemberModal组件存在一些问题：

1. 您在componentDidMount中设置this.state.member而不是this.state.firstName。

2. 删除componentDidMount，改为初始化this.state.firstName以在构造函数中props.selectedmember.firstname。

3. 您已将输入值设置为this.props.selectedmember.firstname，但该值从未更新。相反，您的输入应绑定到this.state.firstName。

变化：

class MemberModal extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: props.selectedmember.firstName
};
}
handleFirstNameChange = e => {
this.setState({ firstName: e.target.value });
// Make call to API to save changes here
User.save({ firstName: e.target.value });
};
render() {
const { firstName } = this.state;
return (
<div className="static-modal">
<input
value={firstName}
type="text"
className="form-control"
id="FirstName"
aria-describedby="FirstName"
placeholder=""
name="email"
onChange={this.handleFirstNameChange}
/>
</div>
);
}
}