时间戳

首页 > 解决方案 > 在反应中将状态从类组件传递到功能组件

javascript - 在反应中将状态从类组件传递到功能组件

问题描述

我有一个类，我声明：

constructor() {
  super();
  this.state = {
    checked: false,
    house: [],
    selectedHouse: null
  };
  this.handleChange = this.handleChange.bind(this);
}

handleChange(checked) {
  this.setState({ checked });
}

render() {
  return (
    <React.Fragment>
        <TSwitch handleChange={this.handleChange.bind(this)} house={this.state.house} houseClicked={this.h}></TSwitch>
    </React.Fragment>

  );
}

然后我想state.checked从一个子组件设置：

function TSwitch(props) {
  const handleChange = (house) => (evt) => {
    props.handleChange(house);
  };

  return (
    <div>
      {props.house.map((house) => {
        return (
          <label>
            <span>Switch with default style</span>
            <Switch onChange={handleChange} checked={this.state.checked} />
          </label>
        );
      })}
    </div>
  );
}

我可以调用 handleChange 但我希望能够更改组件的值state.checked。<TSwitch/>

标签： javascripthtmlreactjs

解决方案

这就是你的父组件应该是这样的：

constructor() {
  super();
  this.state = {
    checked: false,
    house: [],
    selectedHouse: null
  };
  this.handleChange = this.handleChange.bind(this);
}

handleChange(checked) {
  this.setState({ checked });
}

render() {
  return (
    <React.Fragment>
        <TSwitch handleChange={this.handleChange} isChecked={this.state.checked} house={this.state.house}></TSwitch>
    </React.Fragment>

  );
}

这是您的子组件的外观：

function TSwitch(props) {

  return (
    <div>
      {props.house.map((house) => {
        return (
          <label>
            <span>Switch with default style</span>
            <Switch onChange={x => props.handleChange(x)} checked={props.isChecked} />
          </label>
        );
      })}
    </div>
  );
}

注意：您正在使用Switch组件，我不确定变量x是 aboolean还是 an object，但很可能应该是boolean:true或false。如果这不起作用，请记录x& 的值，看看它是否是一个对象，然后将布尔值传递给props.handleChange. 虽然我仍然认为这不是必需的。祝你好运！

推荐阅读