Question

我有一个子组件。它应该根据道具创建对象并进行渲染。该对象应作为状态添加。

下面是当前代码。

示例：-

<popupComponent element={object} />

popupComponent.js

class popupComponent extends Component {constructor(props) {
        super(props);
        this.state = {
            name: ""
        }
    }

    updateName (event) {
        this.setState({
            name: event.currentTarget.value
        })
    }


    publishElement () {
        this.props.saveAndClose({
            name: this.state.name
        });

        this.setState({
            name: ""
        })
    }

    render() {

         return (
            <div draggable="true"  >
                    <h4>Name:</h4>
                    <input id="elementName" type="text" placeholder="Enter element name" value={element.name} onChange={this.updateName.bind(this)}/>
                    <button id="saveAndClose" onClick={this.publishElement.bind(this)}>Save & close</button>
            </div>
        );
    }
}

export default popupComponent;

问题：状态改变时，除渲染外还执行哪个功能？在这种情况下，构造函数只能运行一次，而我无法尝试执行该操作，因为执行构造函数时，状态不可用。

Answer 1

已解决了有条件完全不创建组件的问题。

实际问题，不知何故该组件的构造函数仅被调用一次，但是我希望在可视化显示时被调用。

已解决的问题是有条件地完全不包括以下组件。

{this.state.show ? <PopupMarkupEditor   
                    element = {selectedElement}
                    saveAndClose = {this.saveElement}
                    show = {this.state.show}
                    /> : null }

像渲染功能一样，是否每次更改状态都会执行任何公共反应功能？

1 个答案: