更改函数内部的状态

Question

如何更改函数内部的状态？

我正在尝试将selectedFile的状态从null更改为event.target.files [0]，但是在onChangeHandler函数内部不起作用。

import React, { Component } from "react";

export default class Comp1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFile: null,
    };
  }

  onChangeHandler = event => {
    console.log(event.target.files[0]);   // <--THIS WORKS //
    console.log(this.state.selectedFile); // <-- THIS WORKS //
    this.setState({
      selectedFile: event.target.files[0]
    }); // THIS DOES NOT WORK //
    console.log(this.state.selectedFile); // selectedFile did not update state //

  };
  render() {
    return (
      <div className="ui placeholder segment">
        <div className="ui icon header" />
        <input
          type="file"
          className="file"
          id="file"
          onChange={this.onChangeHandler}
        />
        <label htmlFor="file">
          <div className="button">Press</div>
        </label>
      </div>
    );
  }
}

Answer 1

如果您想读取新状态或基于新状态更新另一个状态项，则可以提供对setState函数的回调，该函数将在状态更新时运行：

onChangeHandler = (event) => {
  this.setState({
    selectedFile: event.target.files[0]
  }, () => {
    // `selectedFile` will have an updated value
    console.log(this.state.selectedFile)

    // if needed, update your state again based on the new state
    this.setState({ ... })
  })
}

Answer 2

我认为

onChange={this.onChangeHandler}

更改为绑定this，需要为：

onChange={this.onChangeHandler.bind(this)}

或者开始使用钩子，我看到您的组件可以从类迁移到功能性方法