React — 将复选框选中状态传递给父组件？答案

【问题标题】：React — pass checkbox checked state to parent component?React — 将复选框选中状态传递给父组件？
【发布时间】：2016-06-03 21:46:41
【问题描述】：

我有一个内部带有 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;

【问题讨论】：

Facebook 为此使用 onChange 属性。
你可以给你的孩子一个父母的回调函数，它会在checkbox组件的handleClick内部调用
不确定如何形成语法。我在上面添加了一个小提琴。

标签： reactjs state

【解决方案1】：

我在父组件中引入了handleChange函数，只是一个console.log，用来查看哪些checkbox正在更新以及它的状态

class CheckOnOff extends React.Component {
  constructor() {
    super();
    this.state = {
      checked: false
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({checked: !this.state.checked});
    this.props.handleChange(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>
      )
  }
};

const Parent = () => {

  const handleChange = (name, isChecked) => {
    console.log(name, isChecked);
  }

  return (
    <div id="settings">
      <ul>
        <li>
          <p>Auto Sleep: is turned (text from child instance) </p>
          <CheckOnOff id="auto_sleep" handleChange={handleChange.bind(this, 'checkBox1')}/>
        </li>
        <li>
          <p>Auto Light: is turned (text from child instance) </p>
          <CheckOnOff id="auto_light" handleChange={handleChange.bind(this, 'checkBox2')}/>
        </li>
      </ul>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('container')
);

【讨论】：