如何使用钩子将此 class

Question

我正在使用 aws-amplify 开发一个项目，并且我运行跨文档进行放大以获取用户文件并显示它。我试图将其更改为功能组件并使用挂钩，但我不知所措。下面的代码感谢您的任何建议和帮助。

class ImageViewer extends Component {
  handleUpload(event) {
    const file = event.target.files[0];
    const path = file.name;
    Storage.put(path, file).then(() => this.setState({ path }));
  }

  render() {
    return (
      <div className="rounded-circle user-profile-img shadow p-3 mb-5 bg-white rounded">
        <div>
          {this.state && <S3Image path={this.state.path} />}
        </div>
        <input type="file" onChange={this.handleUpload.bind(this)} />
      </div>
    );
  }
}

Answer 1

const ImageViewer = () => {
  const [path, setPath] = React.useState('');

  const handleUpload = (event) => {
    const file = event.target.files[0];
    const path = file.name;
    Storage.put(path, file)
      .then(() => setPath(path));
  }

    return (
      <div className="rounded-circle user-profile-img shadow p-3 mb-5 bg-white rounded">
        <div>
          {path && <S3Image path={path} />}
        </div>
        <input type="file" onChange={handleUpload} />
      </div>
    );
}

如何使用钩子将此 class

How to turn this class using hooks

reactjs

aws-amplify