我在 React 中有一个表单,它动态地添加新的输入元素。这似乎工作正常,但我似乎无法访问此屏幕截图中显示的输入值...
我已经尝试了以下
控制台日志(this.state.telephone.name)
和...
控制台日志(this.state.telephone.tidx.name)
其中 tidx 是唯一键。
这是构造函数...
constructor() {
super();
this.state = {
role: "Installer",
name: "",
telephoneType: [{ name: "" }],
telephone: [{ name: "" }],
tidx: "",
emailType: [{ email: "" }],
email: [{ email: "" }],
eidx: "",
notes: ""
};
}
这是我处理输入表单的功能......
handleTelephoneChange = tidx => evt => {
const newTelephone = this.state.telephone.map((telephone, tsidx) => {
if (tidx !== tsidx) return telephone;
return { ...telephone, name: evt.target.value };
});
this.setState({ telephone: newTelephone }, () => {
// get state on callback
console.log(this.state)
console.log(this.state.telephone.name)
console.log(this.state.telephone.tidx.name)
}
);
};
并渲染成这样......
{this.state.telephone.map((telephone, tidx) => (
<MDBRow key={tidx} className="grey-text flex-nowrap align-items-center no-gutters my-2">
<MDBCol md="12">
<input value={telephone.name} onChange={this.handleTelephoneChange(tidx)}placeholder={`Telephone No. #${tidx + 1}`} className="form-control"/>
</MDBCol>
</MDBRow>
))}
任何建议都非常感谢,因为我对 React 中的表单相当陌生。谢谢。