Question

我有一个内置clickHandler的组件。我想将该状态传递给复选框的父组件，但我不太确定如何从复选框组件中获取它。

FIDDE：https://jsfiddle.net/kirkbross/7km493bd/4/

以下是复选框组件：

import React from 'react';

class CheckOnOff extends React.Component {
  constructor() {
    super();
    this.state = {
      checked: false
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({checked: !this.state.checked});
  }
  render() {
    const text = this.state.checked ? 'On' : 'Off';
    return (
      <div>
        <input type="checkbox" className="on-off-switch" id={this.props.id} ></input>
        <label htmlFor={this.props.id} onClick={this.handleClick} />
        <span>{text}</span>
      </div>
      )
  }
}

module.exports = CheckOnOff;

以下是父组件：

import React from 'react';
import CheckOnOff from 'CheckOnOff';

const Settings = () => (
  <div id="settings">
    <ul>
      <li>
        <span>Auto Sleep:</span>
        <span>{text} from auto_sleep instance</span>
        <CheckOnOff id="auto_sleep" />
      </li>
      <li>
        <span>Auto Light:</span>
        <span>{text} from auto_light instance</span>
        <CheckOnOff id="auto_light" />
      </li>
    </ul>
  </div>
);

export default Settings;

Answer 1

我在父组件中引入了handleChange函数，只是一个console.log来查看正在更新的复选框及其状态

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell: MainTableViewCell! = tableView.dequeueReusableCellWithIdentifier("cellIdentifier", forIndexPath: indexPath) as! MainTableViewCell

    cell.titleLabel.text = self.postsData.objectAtIndex(indexPath.row).valueForKey("title") as? String
    let imageurl = self.postsData.objectAtIndex(indexPath.row).valueForKey("image") as? String
    cell.titleImage.load(imageurl!)

    let jsonStringAsArray = self.postsData.objectAtIndex(indexPath.row).valueForKey("links")
    let data: NSData = jsonStringAsArray!.dataUsingEncoding(NSUTF8StringEncoding)!
    let anyObj: AnyObject? = try! NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions(rawValue: 0))
    var yCoord:CGFloat = 15.0, xCoord:CGFloat = 0.0, buttonHeight:CGFloat = 30.0, buttonWidth:CGFloat = 100.0, buffer:CGFloat = 10.0,i = 0;

    while i<anyObj?.count {
        if cell.viewWithTag((indexPath.row+1)*1000+(i+1)) != nil{
            print("fake")

        }
        else{
            let button :UIButton = UIButton()
            button.frame = CGRectMake(xCoord, yCoord, buttonWidth, buttonHeight)


            button.setTitleColor(UIColor.greenColor(), forState: .Normal)
            button.layer.borderWidth = 1.0
            button.layer.borderColor = UIColor.greenColor().CGColor
            button.layer.cornerRadius = 10.0
            button.titleLabel?.font = UIFont(name: "Futura-Medium", size: 17)
            button.tag = (indexPath.row+1)*1000+(i+1);
            print(button.tag)
            button.addTarget(self, action: #selector(MainViewController.linkButtonAction(_:)), forControlEvents: .TouchUpInside)
            button.setTitle(anyObj?.objectAtIndex(i).valueForKey("title") as? String, forState: .Normal)
            button.sizeToFit()
            let tempWidth = button.frame.size.width + 10;
            button.frame=CGRectMake(xCoord, yCoord, tempWidth, buttonHeight)

            cell.buttonScrollView.addSubview(button)


            xCoord += button.frame.size.width + buffer;

        }
        i += 1
    }
    cell.buttonScrollView.contentSize = CGSizeMake(xCoord, buttonHeight+10)

    cell.clipsToBounds = true;

    return cell
}

React - 将复选框选中状态传递给父组件？

1 个答案: