Reactjs 常量道具中的设置状态

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

您是否有办法将状态设置为totalMatchSample变量

我从ant design官方网站带来了这段代码。

我是个新来的人

请帮帮我

或者如果你有比这更好的方法，请给我

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>
    )
  }
}

导入。。。
常量道具={
名称：'文件'，
多重：对，
操作：API_URL+'/API/search/excelfile'，
onChange（信息）{
const status=info.file.status；
const data=new FormData（）
data.append（'file'，info.file.originFileObj，info.file.name）
Axios.post（道具动作、数据）
。然后（（响应）=>{
这是我的国家({
totalMatchSample:info.file.response.length
})
})
},
};
导出默认类PageSearchByExcel扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
样本总数：0，
totalMatchSample:0
}
}
render（）{
返回(


单击或拖动文件到此区域进行上载
支持单次或批量上传。严禁上传公司数据或其他波段文件

{this.state.totalMatchSample}匹配了来自
{this.state.totalSample}samples



)
}
}

由于您在

PageSearchByExcel

组件之外声明

props

，

此

指的是props对象本身，而不是组件。您可以在组件上定义

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>
    )
  }
}

导入。。。
常量道具={
名称：'文件'，
多重：对，
操作：API_URL+'/API/search/excelfile'，
};
导出默认类PageSearchByExcel扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
样本总数：0，
totalMatchSample:0
}
}
//在这里定义onChange
onChange=（信息）=>{
const status=info.file.status；
const data=new FormData（）
data.append（'file'，info.file.originFileObj，info.file.name）
Axios.post（道具动作、数据）
。然后（（响应）=>{
这是我的国家({
totalMatchSample:info.file.response.length
})
})
}
render（）{
返回(


单击或拖动文件到此区域进行上载
支持单次或批量上传。严禁上传公司数据或其他波段文件

{this.state.totalMatchSample}匹配了来自
{this.state.totalSample}samples



)
}
}

---

希望这有帮助

@sun，根据您发布的内容，我假设您有一些道具被传递到PageSearchByExcel组件

话虽如此，那个道具对象，它是一个反模式，你真的想通过道具系统将道具对象中的每个键传递给PageSearchByExcel

例：

外卖：：

1.）在类本身内部定义类方法，以便正确引用“this”

2.）确保将道具从父组件向下传递到您的页面SearchByExcel

3.）确保使用react生命周期方法加载资源

---

这会让你走的

非常感谢，这对我很有帮助，但请编辑您的答案以更改onChange to arrow函数，因为如果没有，它也不能使用此功能。欢迎使用。无需将其更改为箭头函数。正常函数在其执行上下文中有一个

this

，而箭头函数没有。@HemantParashar但是当Dragger调用你的

this.onChange

函数时，上下文将不再是

PageSearchByExcel

中的“this”，因此在

onChange

中你会得到“this”空对象或全局对象。@Al.G.oh耶…thnx！！我以为我在用bindonChange@Sun很高兴听到，如果这是你想要的答案，别忘了投赞成票或接受它作为答案：）

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

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

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>
    )
  }
}