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

1。

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

我希望能够从class UserViewModel(private val userId: String) : ViewModel() {组件更改state.checked的值

1.1您已经正确地将父类的mutator函数<TSwitch/>传递给了handleChange，但是您在子对象中复制的抽象函数TSwitch是不必要的，并且< em>应该完全删除。

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

onChange

2。

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

2.1您无需在此处使用handleChange。为什么？因为片段是在React 16中引入的，以提供用于处理组件列表的声明性API。否则，它们是不必要的抽象。意思是：如果您不直接处理同级组件，那么您不需要使用// @ 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 })); }来代替React.Fragment；会更惯用。

2.2。如果React.Fragment不会有直接后代，则应将用法语法更改为<div/>。

2.3如果短绒捡起了2.2，那么我强烈建议您安装一个。

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

Answer 2

这将起作用：

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

Answer 3

这就是您的父组件的样子：

image_list_item.xml

这是您的子组件的外观：

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="image"
            type="com.celik.abdullah.learningdifferentscaletypesforimageview.Image" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:weightSum="100">

        <FrameLayout
            android:id="@+id/image_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:scaleType = "center">

            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="center"
                tools:src="@mipmap/ic_launcher_round"
                app:imageSrc="@{image.imageUrl}" />

        </FrameLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

注意：您正在使用ImageView组件，我不确定变量FrameLayout是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或boolean。如果这不起作用，请记录object的值并查看其是否为对象，然后在boolean中传递布尔值。尽管我仍然认为不需要。祝你好运！

在React中将状态从类组件传递到功能组件

3 个答案:

1。

2。