javascript - 如何在ReactJS中设置将两个函数添加到 'onchange's

Question

我是 Reactjs 新手，仍在努力学习 React。我有一些与如何在一个 onChange 事件中调用两个函数有关的问题，我尝试了很多，但不知道如何实现。请你帮助我好吗。谢谢您

函数1

handleChange = ({ fileList }) => this.setState({ fileList });

函数2

handleUpload = e => {
    const reader = new FileReader();
    const storeUser = JSON.parse(localStorage.getItem('user'));
    reader.onload = function(upload) {
      fetch(`http://..../api/s3/uploadtoaws`, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          userId: storeUser._id,
          type: 'employee',
          content: upload.target.result,
          key: e.file.name,
          oldKey: '',
        }),
      })
        .then(response => response.json())
        .then(res => {
          console.warn(res);
        });
      // .done();
    };

    reader.readAsDataURL(e.file.originFileObj);
  };

事件实现

    <Upload
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
          >

Answer 1

只需使用指定的参数调用 JSX 中的函数，但是将 handleUpload 函数用作柯里化(Currying)函数非常重要，这样您就可以访问 event 和 文件列表。

onChange={this.handleUpload(someObj)}

handleUpload = ({ fileList }) => (e) => { // fileList is a field in someObj
    this.setState({ fileList });

    const reader = new FileReader();
    const storeUser = JSON.parse(localStorage.getItem('user'));
    reader.onload = function(upload) {
      fetch(`http://..../api/s3/uploadtoaws`, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          userId: storeUser._id,
          type: 'employee',
          content: upload.target.result,
          key: e.file.name,
          oldKey: '',
        }),
      })
        .then(response => response.json())
        .then(res => {
          console.warn(res);
        });
      // .done();
    };

    reader.readAsDataURL(e.file.originFileObj);
}