Question

我正在使用React JS制作带有复选框的递归树视图。我想创建一个表单并提交按钮以获取已检查的值，但我没有在表单中插入提交按钮的位置。到目前为止，我的代码为每个节点生成一个提交按钮。

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

我认为有两种方法可以做你想做的事。 One（Ex 1）将具有包含两个组件/方法的结构，一个用于表单，另一个用于递归复选框结构。

另一个（例2）将使用道具来有条件地渲染某些部分。

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>
      );
    }
  }
}

在React JS中的递归树视图中提交按钮

1 个答案: