Question

我有一个事件处理程序，该事件处理程序在单击按钮时会更新状态，然后将状态呈现到页面。呈现方式不正确，并且破坏了我的用户界面。我的问题是，是否可以将格式直接应用于以下事件处理程序？

我试图创建一个嵌套数组，因此仅更新1个状态，但没有任何乐趣。

请参阅此视频，了解我遇到的格式问题：https://www.screencast.com/t/HksUkk7g3G

我之前也已经在此处发布了完整代码。 React Nested Array

handleAddTelephone = () => {
    this.setState({
        telephoneType: this.state.telephoneType.concat([{ name: "" }]),
        telephone: this.state.telephone.concat([{ name: "" }])

    });
};

我需要格式化每个状态更新。像...

handleAddTelephone = () => {
    this.setState({
        <span>telephoneType: this.state.telephoneType.concat([{ name: "" }])</span>,
        <span>telephone: this.state.telephone.concat([{ name: "" }])</span>

    });
};

这是我的渲染功能。状态调用必须围绕MDBRow（引导程序行类）进行。 JSX不允许此操作，而我目前使用2个单独的呼叫，一个用于phoneType，另一个用于电话。

<MDBRow className="grey-text no-gutters my-2">

                                        {this.state.telephoneType.map((tt, ttidx) => (

                                            <MDBCol key={ttidx} md="4" className="mr-2">
                                                <select
                                                    defaultValue={tt.name}
                                                    onChange={this.handleTelephoneTypeChange(ttidx)}
                                                    className="browser-default custom-select">
                                                    <option value="Mobile">Mobile</option>
                                                    <option value="Landline">Landline</option>
                                                    <option value="Work">Work</option>
                                                </select>
                                            </MDBCol>
                                        ))}

                                        {this.state.telephone.map((tn, tnidx) => (

                                            <MDBCol key={tnidx} md="7" className="d-flex align-items-center">
                                                <input                                              
                                                    value={tn.name}
                                                    onChange={this.handleTelephoneChange(tnidx)}
                                                    placeholder={`Telephone No. #${tnidx + 1}`}
                                                    className="form-control"
                                                />
                                                <MDBIcon icon="minus-circle"
                                                    className="mr-0 ml-2 red-text"
                                                    onClick={this.handleRemoveTelephone(tnidx)} />
                                            </MDBCol>

                                        ))}

                                    </MDBRow>

和按钮...

  <div className="btn-add" onClick={this.handleAddTelephone}>
                                        <MDBIcon className="mr-1" icon="plus-square" />Add Telephone</div>
                                    <br />

和数组...

class InstallerAdd extends React.Component {
    constructor() {
        super();
        this.state = {
            role: "Installer",
            name: "",
/*             telephone: {
                type: [{ name: "" }],
                number: [{ name: "" }]
              }, */
            telephoneType: [{ name: "" }],
            telephone: [{ name: "" }],
            emailType: [{ email: "" }],
            email: [{ email: "" }]
        };
    }

将HTML格式应用于React this.setstate

0 个答案: