在React/Redux中实现"同步"使用FileReader的方法如下:
<input type="file">
元素来让用户选择文件。当用户选择文件后,触发一个事件处理函数。onload
事件处理函数。onload
事件会在文件读取完成后触发。onload
事件处理函数中,你可以获取到文件的内容,然后将其作为参数传递给Redux的action creator函数。下面是一个示例代码:
// React组件
import React from 'react';
import { connect } from 'react-redux';
import { uploadFile } from './actions';
class FileUploader extends React.Component {
handleFileChange = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = this.handleFileRead;
reader.readAsText(file);
};
handleFileRead = (event) => {
const fileContent = event.target.result;
this.props.uploadFile(fileContent);
};
render() {
return (
<div>
<input type="file" onChange={this.handleFileChange} />
</div>
);
}
}
// Redux action
export const uploadFile = (fileContent) => ({
type: 'UPLOAD_FILE',
payload: fileContent,
});
// Redux reducer
const initialState = {
fileContent: '',
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'UPLOAD_FILE':
return {
...state,
fileContent: action.payload,
};
default:
return state;
}
};
export default connect(null, { uploadFile })(FileUploader);
在上面的示例中,当用户选择文件后,handleFileChange
函数会创建一个FileReader对象,并为其绑定handleFileRead
函数。handleFileRead
函数会在文件读取完成后触发,并将文件内容作为参数传递给Redux的uploadFile
action creator函数。在Redux的reducer中,根据action的类型来更新state,将文件内容存储在fileContent
属性中。
这样,你就可以在React/Redux中实现"同步"使用FileReader了。请注意,上述示例中的Redux部分只是一个简单的示例,实际应用中可能需要更复杂的逻辑和数据处理。
领取专属 10元无门槛券
手把手带您无忧上云