在 React 中将状态从类组件传递到函数组件

Question

我有一堂课，我在其中声明：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/>。

Answer 1

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

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。虽然我仍然认为这没有必要。祝你好运！

Answer 2

这将起作用：

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

Answer 3

1.

让我们从你的直接问题开始

我希望能够更改state.checked组件<TSwitch/>的值

1.1 您已经正确地将您的变通函数handleChange从父类传递给了您的子类，但是您复制的子类内部的TSwitch抽象函数是不必要的，应该完全删除。handleChange

1.2 接下来，回到类的handleChange函数，您需要handleChange通过修复传递给它的参数来修改父组件中的函数定义 - 这将是event隐式传递的对象，因为您将其注册为onChange={handleChange}inside的回调Tswitch。在调用时，它将被调用，并且来自 React 的 evt 参数onChange将被传递到handleChange. 但是，你不需要它。它不携带您所必需的信息。所以我会完全忽略它。

// @ parent component

handleChange(evt) {

  // NOTE: i'm going to ignore the evt, since I don't need it.

  // NOTE: i'm going to use optional callback given by setState, to access prevState, and toggle the checked state boolean value.

  this.setState((prevState) => ({ checked: !prevState.checked }));

}

2.

现在让我们清理您的代码并讨论一些最佳实践

2.1 你不需要React.Fragment在这里使用。为什么？因为 React 16 中引入了 Fragments，以提供用于处理组件列表的声明式 API。否则，它们就是不必要的抽象。意思是：如果你不直接处理同级组件，那么你不需要直接使用React.Fragmenta<div/>来代替；会更惯用。

2.2. 如果<TSwitch></TSwitch>不打算有直接后代，那么您应该将使用语法更改为<TSwitch/>.

2.3 如果 2.2 没有被 linter 选中，那么我强烈建议您安装一个。

2.4 如果您愿意，您可以继续在构造函数中使用类处理程序的显式绑定。这是学习 React 的良好第一步，但是，有最佳方法可以通过Babel 的转换属性插件删除此样板。