React 访问数组中的值

IT技术 arrays reactjs forms input jsx
2021-05-06 03:45:02

我在 React 中有一个表单,它动态地添加新的输入元素。这似乎工作正常,但我似乎无法访问此屏幕截图中显示的输入值...

console.log 数组

我已经尝试了以下

控制台日志(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 中的表单相当陌生。谢谢。

1个回答

telephone 是一个数组,所以你应该使用索引表示法。

  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={this.state.telephoneType[tidx].yourValue} onChange={this.defineYourTelephoneTypeEventHandler(tidx)}/>
            <input value={telephone.name} onChange={this.handleTelephoneChange(tidx)}placeholder={`Telephone No. #${tidx + 1}`} className="form-control"/>
        </MDBCol>
      </MDBRow>
 ))}