Question

我可以在15中使用它，但是意识到我需要版本16。我认为Child类中的toggle（）函数是我认为需要修复的功能。任何帮助表示赞赏。（我不知道我需要在这个问题上添加更多细节才能提交它。我希望代码能说明一切）

codepen ... https://codepen.io/badbabykosh/pen/pGLYov

js

let allData = 
    [
    {
      id:1,
      parent: "Checked Parent",selected:false,
      children:
          [
            {id:2, name:"One Item",selected:false},
            {id:3, name:"Checked Child",selected:false}
          ]
     },
     {
       id:4,
       parent: "Parent",selected:false,
       children:
          [
            {id:5, name:"Child One",selected:false},
            {id:6, name:"Child Two",selected:false}
          ]
     }
    ];

class Application extends React.Component {  
  render() {
    return (<CheckboxContainer data={allData} />);
  }
}

class CheckboxContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {    
    let list = this.props.data.map((s) => {
      return (<ParentCheckbox data={s} />);
    });

    return(
      <div>
        {list}
      </div>
    );
  }
}
class ParentCheckbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selected: this.props.data.selected,show:true,children:this.props.data.children};
  }

  toggleShow() {
    this.setState({show:!this.state.show});
  }

  //Toggle the state checkbox & nested city checkboxes
  toggle() {
    let newSelectedState = !this.state.selected;
    this.setState({selected:newSelectedState});
    this.toggleCities(newSelectedState);
  }

  // Toggle the state of the cities accordingly: Select / Unselect all cities
  toggleChildren(selected) {
    let children = this.state.children;
    for(var i = 0; i < children.length; i++) {
      children[i].selected = selected;
    }
    this.setState({children:children});
  }



  // Update the state checkbox accordingly when cities have been toggled
  onChildToggle(name,selected) {
    // Update the state of the cities accordingly
    let children = this.state.children;
    for(var i = 0; i < children.length; i++) {
      if(children[i].name === name) {
        children[i].selected = selected;
        break;
      }
    }

    //State checkbox should be selected if >1 city is checked
    let updatedSelectionState = false;
    for(let i = 0; i < children.length;i++) {
      if(children[i].selected) {
        updatedSelectionState = true;
        break;
      }
    }
    this.setState({selected:updatedSelectionState,children:children});
  }

  render() {            
    let children;
    if (this.state.show) {
      children = this.state.children.map((child) => {
        return (<Child name={child.name} selected={child.selected} onChildToggle={this.onChildToggle.bind(this)} />);
      });      
    }

    return(
      <div className="parent">
        <label>
          <input type="checkbox" onClick={this.toggle.bind(this)} checked={this.state.selected}></input>
          <h1>{this.props.data.parent}</h1>
        </label>

        <button onClick={this.toggleShow.bind(this)}>{this.state.show ? "Hide" : "Show"}</button>

        <div className='child'>
          {children}
        </div>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
  }

  toggle() {
    this.props.onChildToggle(this.props.name,!this.props.selected);
  }

  render() {    
    return(
      <div>
        <label>
          <input type="checkbox" checked={this.props.selected} onClick={this.toggle.bind(this)}></input>
          <h1>{this.props.name}</h1>
        </label>
      </div>
    )
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

css

html, body
  height: 100%

body
  display: flex
  justify-content: center
  align-items: center
  font-family: Helvetica Neue

button
  display: inline-block

h1
  display: inline-block

.child
  margin-left: 10px

.parent 
  margin-bottom: 20px

html

<div id="app"></app>

Answer 1

您可以有一个提供一个复选框的react组件，您可以重复使用它以生成所需的任意数量的复选框。您只需要从react组件的return函数内部返回标签即可。

您还可以具有组件状态，该状态可以帮助您跟踪复选框是否处于选中状态。

这将是一个很好的起点。 https://reactjs.org/tutorial/tutorial.html

Answer 2

我在控制台中仅看到这些错误。我正在使用react和react-dom版本16.0.0

这是我的package.json

{
  "name": "expensify",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Amritansh",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "live-server": "^1.2.0",
    "node-sass": "4.5.3",
    "normalize.css": "7.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-modal": "2.2.2",
    "react-router-dom": "^4.3.1",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  },
  "devDependencies": {
    "clappr": "^0.3.1"
  }
}

只需向地图功能添加一个键，以上警告也会消失

React一直在说onChildToggle不是一个函数，为什么呢？

2 个答案: