Question

我想设置PageSearchByExcel的类的状态，但我知道（ this ）不再用于PageSearchByExcel。

您可以通过某种方式将状态设置为totalMatchSample变量。

我将此代码从ant-design官方网站上获取。 https://ant.design/components/upload/

我是新来的人。

请帮助我。

或者，如果您有其他比这更好的方法，请给我。

import ...

const props = {
  name: 'file',
  multiple: true,
  action: API_URL + '/api/search/excelfile',
  onChange(info) {
    const status = info.file.status;
    const data = new FormData()
    data.append('file', info.file.originFileObj, info.file.name)
    Axios.post(props.action, data)
      .then((Response) => {
        this.setState({
          totalMatchSample: info.file.response.length
        })
      })
  },
};

export default class PageSearchByExcel extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      totalSample: 0,
      totalMatchSample: 0
    }
  }

  render() {
    return (
      <div>
        <Dragger {...props}>
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
          </p>
          <p className="ant-upload-text">Click or drag file to this area to upload</p>
          <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
        </Dragger>
        <div>
          <p>
            {this.state.totalMatchSample} matched samples from 
            {this.state.totalSample} samples
              </p>
          <br />
        </div>
      </div>
    )
  }
}

Answer 1

由于您在props组件外部声明了PageSearchByExcel，因此this指道具对象本身而不是组件。您可以在组件上定义onChange方法，并将其作为道具传递给Dragger，然后将其正确绑定到PageSearchByExcel。

import ...

const props = {
  name: 'file',
  multiple: true,
  action: API_URL + '/api/search/excelfile',
};

export default class PageSearchByExcel extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      totalSample: 0,
      totalMatchSample: 0
    }
  }

  // Define onChange here
  onChange = (info) => {
    const status = info.file.status;
    const data = new FormData()
    data.append('file', info.file.originFileObj, info.file.name)
    Axios.post(props.action, data)
         .then((Response) => {
            this.setState({
              totalMatchSample: info.file.response.length
            })
          })
  }

  render() {
    return (
      <div>
        <Dragger {...props} onChange={this.onChange}>
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
          </p>
          <p className="ant-upload-text">Click or drag file to this area to upload</p>
          <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
        </Dragger>
        <div>
          <p>
            {this.state.totalMatchSample} matched samples from 
            {this.state.totalSample} samples
              </p>
          <br />
        </div>
      </div>
    )
  }
}

希望这会有所帮助！

Answer 2

@sun，根据您发布的内容，我将假定您已将某种道具传递给PageSearchByExcel组件。

已经说过，那个props对象，它是一个反模式，您真的想通过props系统将那个props对象中的每个键向下传递给PageSearchByExcel。

例如：

Class ParentComponent ... 
...some code 
render () {
..someJSX

<PageSearchByExcel name='file' multiple={true} />
}

这基本上将在PageSearchByExcel中设置道具

既然这样，我们来谈谈setState({}) and loading resources

在您的PageSearchByExcel组件中，您将拥有类似的内容



export default class PageSearchByExcel extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      totalSample: 0,
      totalMatchSample: 0
    }
  }

// define your axios call inside your component class NOT OUTSIDE

loadResource = () => {
 // ....yourAxiosCodeHere
}

// You then set the state at the first load of the component
componentDidMount () {
 this.loadResource()
}

  render() {
    return (
      <div>
        <Dragger {...this.props}>
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
          </p>
          <p className="ant-upload-text">Click or drag file to this area to upload</p>
          <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
        </Dragger>
        <div>
          <p>
            {this.state.totalMatchSample} matched samples from 
            {this.state.totalSample} samples
              </p>
          <br />
        </div>
      </div>
    )
  }
}

外卖：：

1。）在类本身中定义您的类方法，以便正确引用“ this”

2。）确保将道具从父组件传递到PageSearchByExcel

3。）确保使用反应生命周期方法加载资源

这应该可以帮助您。

Const Props ReactJS中的setState

2 个答案: