无法在react中分配新属性，得到了“无法添加属性xxx，对象不可扩展”

Question

I want to make a dialog component used to submit form.

Code

class SubmitDialog extends React.PureComponent {
  toggleDialog() {
    this.setState({isOpen:!this.state.isOpen})
  }

  handleSubmit() {
    // children need have handleSubmit
    this.props.children.props.handleSubmit()
    this.toggleDialog()
  }

  render(){
    const {children, title } = this.props;

    // I want to pass a button to trigger open this dialog
    let trigger = React.cloneElement(this.props.trigger);
    trigger.onClick = this.toggleDialog;

    return (

      {trigger},
      <Dialog
        open={this.state.isOpen}
        onClose={() => {this.toggleDialog()}}
        className="dialog"
      >
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        <DialogBody scrollable className="dialog-body">
          {children}
        </DialogBody>
        <DialogFooter className="align-axis">
          <Button raised className="cyan white-text" onClick={()=> { this.toggleDialog() }}>取消</Button>
          <Button raised primary onClick={()=> { this.handleSubmit() }} >提交</Button>
        </DialogFooter>
      </Dialog>
    )
  }

};

Purpose

I want to pass

1. a form with handleSumbit function (children)
2. a clickable element to open this dialog (trigger)

Because outside component don't know how to open this dialog, I tend to pass the element into dialog, and let dialog pass a onClick funtion to it. But I found I can't add set property to this.props.trigger . I tried to add React.cloneElement , but still not work.

Tried Object.seal :

Answer 1

try:

React.cloneElement(this.props.trigger, {
        onClick: this.toggleDialog
});