background

This article describes how antD’s Upload component edits the echo and explains how to use the onChange callback function.

The main points are as follows:

  1. Upload a file to Upload a form. How do I initialize the data when editing the output?
  2. Upload a customonChangeHow do I pass in extra arguments to the callback function?
  3. React:setStateChange the value of an element in an array?

Upload Component basics

The Upload component provides the default onChange callback, which returns the name of the uploaded file and displays all uploaded files. If you need to limit the number of uploaded files, use the default callback function with the maxCount = {1} attribute to achieve this effect.

In this case, the fileList property of Upload is dynamically updated. Its type is array. Slice can be used to keep only the information of the latest uploaded file.

The basic process of using Upload is as follows:

First, define a global state variable that stores the file information of the Upload.

The second step is to define the onChange event to determine how to handle the result of the file upload. File upload Requests are sent to the Action path. After the file is uploaded to the server, the action path is returned to the server for submitting the entire form.

onFileChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files fileList = fileList.slice(-1); // 2. update state this.setState({ fileList }); const response = info.fileList[0].response; If (info.filelist. length ==1 && response! = undefined) {if(response.success) {message.success(" uploads successfully "); } else {message.error(response.message); }}}Copy the code

In the third step, init fileList at componentDidMount. This will set the initial value of the Upload fileList when the form is edited. Its data structure is as follows:

this.setState({
	fileList: [
		{
			uid: fileId,
			name: fileName,
			status: 'done',
			url: `${BASE_URL}/download?fileId=${fileId}&time=${date}`,
	}]
})
Copy the code

Upload component render:

Const = {name: 'multipartFile',// Action: '${BASE_URL}/ XXX /upload ', onChange: this.onFileChange.bind(this) }; <Upload showUploadList={{showRemoveIcon:false}} className="upload-list-inline" {... Props} fileList={this.state.filelist}> <Button icon={< uploadbank />Copy the code

OnChange callback function

Upload’s callback functiononChangeIt has a fixed input parameter. The type is Object. The debugger can check its structure:

  1. file: Indicates the file object uploaded by the user
  2. fileList: List of files that have been uploaded by the component

The Upload component will pass a fixed parameter when the onChange method is triggered. If we want to pass additional parameters, we need to set this parameter when the event is bound:

onChange: (info)=>this.onFileChange(info,index)
Copy the code

The onChange event is specified as an anonymous function whose method body calls a custom method that receives the callback parameter info and the additional parameter index.

SetState modifies an element of the array

React does not React automatically to an array object in React state.

A roundabout way is to back up the array object and call setState after the operation is complete.

For example, dynamically adding and modifying a list element of global state to a list element can be implemented like this:

addElement = ()=>{ const nextNo = this.state.dataList.length+1; const nextStep = { id: createUuid(), no: nextNo, name: '' }; this.setState({ dataList: This. The state. The dataList. Concat (nextStep)})} removeElement (removeIndex, record) {/ / remove this list data. SetState ({ dataList:this.state.dataList.filter(item=> item.id ! == record.id) }) }Copy the code

The revelation of

React has a special bind method that binds the current object. There are two ways to bind the object: using an anonymous function or calling bind directly.

  1. Anonymous functions:()=>this.func()
  2. Manual binding mode:this.func.bind(this)

React displays input data as it is, such as regular HTML tags, without being parsed into page elements.

In this way, there is no need to escape the front-end input data, and the Java back end saves the trouble of writing XSSFilter, which is quite convenient!