在 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() {&nbsp; super();&nbsp; this.state = {&nbsp; &nbsp; checked: false,&nbsp; &nbsp; house: [],&nbsp; &nbsp; selectedHouse: null&nbsp; };&nbsp; this.handleChange = this.handleChange.bind(this);}handleChange(checked) {&nbsp; this.setState({ checked });}render() {&nbsp; return (&nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; <TSwitch handleChange={this.handleChange} isChecked={this.state.checked} house={this.state.house}></TSwitch>&nbsp; &nbsp; </React.Fragment>&nbsp; );}您的子组件应如下所示：function TSwitch(props) {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {props.house.map((house) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Switch with default style</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Switch onChange={x => props.handleChange(x)} checked={props.isChecked} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>&nbsp; );}注意：您正在使用一个Switch组件，我不确定该变量是否x是 aboolean或 an object，但最有可能它应该是boolean:true或false。如果这不起作用，请记录x& 的值，看看它是否是一个对象，并将布尔值传递到 中props.handleChange。虽然我仍然认为这没有必要。祝你好运！

Answer 2

这将起作用：handleChange(checked)&nbsp;{ &nbsp;&nbsp;this.setState({&nbsp;checked:!checked&nbsp;}); }

Answer 3

1.让我们从你的直接问题开始我希望能够更改state.checked组件<TSwitch/>的值1.1 您已经正确地将您的变通函数handleChange从父类传递给了您的子类，但是您复制的子类内部的TSwitch抽象函数是不必要的，应该完全删除。handleChange1.2 接下来，回到类的handleChange函数，您需要handleChange通过修复传递给它的参数来修改父组件中的函数定义 - 这将是event隐式传递的对象，因为您将其注册为onChange={handleChange}inside的回调Tswitch。在调用时，它将被调用，并且来自 React 的 evt 参数onChange将被传递到handleChange. 但是，你不需要它。它不携带您所必需的信息。所以我会完全忽略它。// @ parent componenthandleChange(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 的转换属性插件删除此样板。