Schaltfläche "Senden" in rekursiver Treeview in React JS

Question

Ich mache eine rekursive Treeview mit Checkboxen mit React JS. Ich möchte ein Formular erstellen und senden, um die überprüften Werte zu erhalten, aber ich bekomme nicht, wo die Schaltfläche "Senden" in das Formular eingefügt werden soll. Bis jetzt generiert mein Code eine Übergabeschaltfläche mit jedem Knoten.

toggle =() => { 
    this.setState(
     {visible: !this.state.visible} 
    ); 
    }; 

    render() { 
    var childNodes; 

    if (this.props.node.childNodes != null) { 
     childNodes = this.props.node.childNodes.map(function(node, index) { 
     return <li key={index}><Treeview node={node} /></li> 
     }); 
    } 

    var style; 
    if (!this.state.visible) { 
     style = {display: "none"}; 
    } 

    return (
     <form> 
     <label> 
      {this.props.node.title} 
      <input type="checkbox" onClick={this.toggle}/> 
     </label> 
     <ul style={style}> 
      {childNodes} 
     </ul> 
     <input type="submit" value="Submit"/> 
     </form> 
    ); 
    } 

Answer 1

Ich denke, es gibt zwei Möglichkeiten zu tun, was Sie wollen. Eine (Ex 1) würde eine Struktur mit zwei Komponenten/Methoden haben, eine für die Form und eine andere für die rekursive Checkbox-Struktur.

Eine andere (Ex 2) würde sein, Requisiten zu verwenden, um einige Teile bedingt zu rendern.

Ex 1

function TreeView (props) { 
    var childNodes; 

    if (props.node.childNodes != null) { 
    childNodes = props.node.childNodes.map(function(node, index) { 
     return <li key={index}><Treeview node={node} /></li> 
    }); 
    } 

    var style; 
    if (!props.visible) { 
    style = {display: "none"}; 
    } 

    return (
    <ul style={style}> 
     {childNodes} 
    </ul> 
); 
} 

class Form extends React.Component { 
    constructor (props) { 
    super(props); 
    this.toggle = this.toggle.bind(this); 
    } 

    toggle() { 
    this.setState(
     {visible: !this.state.visible} 
    ); 
    }; 

    render() { 
    return (
     <form> 
     <label> 
      {this.props.node.title} 
      <input type="checkbox" onClick={this.toggle}/> 
     </label> 

     <TreeView node={props.node} visible={this.state.visible} /> 

     <input type="submit" value="Submit"/> 
     </form> 
    ); 
    } 
} 

Ex 2

class Treeview extends React.Component { 
    constructor (props) { 
    super(props); 
    this.toggle = this.toggle.bind(this); 
    } 

    toggle() { 
    this.setState(
     {visible: !this.state.visible} 
    ); 
    }; 

    render() { 
    var childNodes; 

    if (this.props.node.childNodes != null) { 
     childNodes = this.props.node.childNodes.map(function(node, index) { 
     return <li key={index}><Treeview node={node} childTree /></li> 
     }); 
    } 

    var style; 
    if (!this.state.visible) { 
     style = {display: "none"}; 
    } 

    if (this.props.childTree) { 
     return (
     <ul> 
      {childNodes} 
     </ul> 
    ) 
    } else { 
     return (
     <form> 
      <label> 
      {this.props.node.title} 
      <input type="checkbox" onClick={this.toggle}/> 
      </label> 
      <ul style={style}> 
      {childNodes} 
      </ul> 
      <input type="submit" value="Submit"/> 
     </form> 
    ); 
    } 
    } 
}