Question

我在ReactJS中管理状态时遇到问题。我创建了一个名为“ Step”的组件，该组件由一个文本输入字段和一个按钮组成。该按钮的功能是创建一个“子步骤”，以便您具有如下结构化列表：

父步骤
- 子步骤
  - 童子步
父级step2

以此类推。

每个步骤都有2个状态变量：它是描述（在文本输入中的内容）以及其自己的子步骤的列表。在创建父步骤的主要组件中，我有一个状态数组，其中包含所有父步骤（包含子步骤的列表，包含子步骤的列表，依此类推）。

问题是当我尝试记录此主阵列时。对于每个第一级步骤表明它没有描述，也没有子步骤。

我的目标是简单地记录阵列并获取所有步骤（作为主要步骤或在另一步骤的数组内部）

这是我在主要组件中添加主要步骤的方法：

export default class DynamicForm extends Component {
constructor(props) {
    super(props);
    this.state = {
        title: '',
        actors: [],
        steps: [],
        systemActorAdded: false,
    };

    let url = "http://localhost:8080";
}

addStep = () => {
    const currentSteps = this.state.steps;
    currentSteps.push(new Step());
    this.setState({steps: currentSteps});
};

removeStep = () => {
    const steps = this.state.steps;
    steps.pop();
    this.setState({steps: steps});
};

这是“步骤”组件，应包含其说明及其所有子步骤：

export default class Step extends Component {
constructor() {
    super();
    this.state = {
        subSteps: [],
        description: '',
    };
}

createSubStep = () => {
    let subSteps = this.state.subSteps;
    subSteps.push(new Step());
    this.setState({subSteps});
};

removeSubStep = () => {
    let subSteps = this.state.subSteps;
    subSteps.pop();
    this.setState({subSteps});
};

handleInputChange = (event) => {
    event.preventDefault();
    this.setState({description: event.target.value});
};

render() {
    const subSteps = this.state.subSteps.map((element, index) => {
        return (
            <Step key={index}/>
        )
    });

    return (
        <div className="text-and-button">
            <input type="text" className="form-control animated lightSpeedIn step"
                   placeholder="Wprowadź krok" onChange={this.handleInputChange}/>
            <button type="button" className="btn btn-success step-button animated lightSpeedIn"
                    onClick={this.createSubStep}>
                <i className="fas fa-plus"/>
            </button>
            {this.state.subSteps.length > 0 ?
                <button type="button" className="btn btn-danger step-button animated lightSpeedIn"
                        onClick={this.removeSubStep}>
                    <i className="fas fa-minus"/>
                </button> : null}

            <div className="full-width">
                {subSteps}
            </div>
        </div>
    )
}
}

这是我从主要组件记录步骤数组内容的方法：

getStepsArray = () => {
        let stepArray = this.state.steps;
        let steps = [];
        for (let step of stepArray) {
            steps.push(step.state);
        }
        return steps;
    };

编辑：这是我期望作为整个表的示例输出：

"steps":[
{
  "description":"asd",
  "subSteps":[
    {
      "description":"asd",
      "subSteps":[
        {
            "description":"hello"
        }
        ]
    }
  ]
},
{
  "description":"aaaa"
}

]

Answer 1

我建议将视图（组件的渲染）和数据分开。

Answer 2

我会这样尝试：由于您的子步骤似乎与主要状态相关，因此请在主要组件中创建add和remove子步骤方法，并将其传递给Step组件。设置您的主要状态，以便state.steps是对象（步骤）的数组，每个对象都包含子步骤。

还可以通过main中的子步骤进行映射，并向下传递“ substeps”作为道具。

由于state.description来自Step组件中的输入（即受控制），因此您也可以将其作为参数传递回主状态。记录stepArray时，然后可以向下钻取子步骤作为step.substeps。

希望有帮助！

在父ReactJS中更新状态

2 个答案: