Question

我想构建一个表单生成器系统。我有一个名为setLabel的全局函数，该函数绑定到名为InputBox的组件并更改其状态。此全局函数由另一个名为ModalPanel的组件触发，该组件控制绑定的组件InputBox上的可编辑属性。为了简化这个问题，我简化了函数和组件类；

这是全局函数；

function setLabel(postID, attributeName ){

    var text = 'example';
    if(text !== ''){

    this.setState({ [attributeName] : text});

    }
}

这是绑定到setLabel函数的组件。请注意，如何将setLabel函数作为属性从父InputBox组件传递给子ModalPanel组件函数。

class InputBox extends Component{

    constructor(props){
        super(props);
        this.state = {
            placeholder : '',
            maxlength: '',
            type: '',
        }

        this.setLabel = setLabel.bind(this); // Binding this to the global function.
    }

render(){

        let elementId = "inputElement-" + this.props.idCounter;
        let mainElement = <Form.Control id =  {elementId} type={this.state.type}
                                        placeholder = {this.state.placeholder} 
                                        maxLength = {this.state.maxlength}
                            />
        return  <Row>
                <ModalPanel handleHide = {this.props.handleHide} handleShow = {this.props.handleShow}  setLabel = {this.setLabel}/> 
                </Row>
    }
}

最后，下面是ModalPanel组件函数，其中触发了setLabel函数。

function ModalPanel(props){

return(
    ......................
    ......................
    ......................
<Button variant="primary" onClick = {() => props.setLabel()}>Save changes</Button>
    ......................
    ......................
    ......................)
}

在setLabel组件中单击按钮时，必须触发旨在设置InputBox状态的

ModalPanel函数。问题是，窗口上呈现了多个<InputBox />组件，当我尝试使用此功能时，“状态更改”仅影响<InputBox />组件的第一个实例。我想做的是，每个实例都应该具有自己的内部状态，并且setLabel()函数应该绑定到从其调用的特殊组件上。因此，该功能可以设置不同组件实例的状态。我该怎么办？

谢谢。

添加：

请检查下面的链接，以查看gif，我的系统工作不正常。如您所见，即使我选择第三个输入框元素来编辑其属性（在本例中，设置其占位符文本），更改仍在第一个输入框上进行；

Go to gif

使用“ this”绑定全局功能仅影响组件的一个实例

0 个答案: