Question

我是React的新手，我正在尝试找出在组件的Return（）之外处理事件处理程序的正确方法。如果这不是正确的做事方式，我愿意接受“更好”的做法。遵循惯例的解决方案。

组件的渲染具有：

public render() {
    type CostMap_Import = typeof CostMap_Import;
    type SchedMap_Import = typeof SchedMap_Import;
    let importFields = this.props.selected == rdEV ? CostMap_Import : SchedMap_Import;

    let fields = Object.keys(importFields).map((i: Key) => {
        return <Dropdown menuItems={this.state.items} menuTitle={i} onSelect={this.handleFieldSelect}/>
    })

    let fieldCount = fields.length
    let contents = this.state.loading
        ? <p><em>Loading...</em></p>
        : Upload_FieldMapping.renderFieldMapGrid(fieldCount, fields)

    return <div>{contents}</div>
}

Upload_FieldMapping.renderFieldMapGrid是：

private static renderFieldMapGrid(count: number, fields: any) {
    const centerLabel: any = { display: 'block', textAlign: 'center', lineHeight: '100%', fontSize: '2em', marginLeft: '100px' }
    let topHalf = fields.slice(0, count / 2)
    let bottomHalf = fields.slice(count / 2)
    return <Grid>
        <Row>
            <label style={centerLabel}>SELECT FIELD MAPPING BELOW:</label>
        </Row>
        <br/>
        <Row className="show-grid row">
            <Col sm={4} smPush={4}>
                {topHalf}
            </Col>
            <Col sm={4} smPush={4}>
                {bottomHalf}
            </Col>
        </Row>
        <br />
        <Row style={centerDiv}>
            <input type="submit" value="Next" className="btn btn-success" onClick={this.handleMappingSubmit}/> 
        </Row>
    </Grid>
}

这是遵循Asp.NET Core 2.0 React应用程序模板中的类似模式。

我收到的错误：

"TS2339 (TS) Property 'handleMappingSubmit' does not exist on type 'typeof Upload_FieldMapping'."

在：

<input type="submit" value="Next" className="btn btn-success" onClick={this.handleMappingSubmit}/>

修改构造函数：

constructor(props: any) {
    super(props);
    this.state = { items: [], loading: true };
    this.onFieldSelect = this.onFieldSelect.bind(this)
    this.handleMappingSubmit = this.handleMappingSubmit.bind(this)

}

解

如所选解决方案中所述，答案是通过删除static并将Upload_FieldMapping.renderFieldMapGrid(fieldCount, fields)更改为this.renderFieldMapGrid(fieldCount, fields)

使renderFieldMapGrid成为实例方法

Answer 1

问题是renderFieldMapGrid是一个静态方法，因此this处理程序中的onClick引用类Upload_FieldMapping本身而不是实例。这就是TypeScript错误提到typeof Upload_FieldMapping而不是Upload_FieldMapping。

的原因

要修复它，您可以将实例作为额外参数传递给renderFieldMapGrid，但通过删除static并在{{this上调用它，将其转换为实例方法可能更有意义。 1}}而不是Upload_FieldMapping。

Answer 2

来自React documentation：

您必须小心JSX回调中this的含义。在JavaScript中，默认情况下不会绑定类方法。如果您忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，this将不会被定义。

这不是特定于React的行为;它是JavaScript中函数如何工作的一部分。通常，如果您在其后引用没有（）的方法，例如onClick = {this.handleClick}，则应绑定该方法。

假设this.handleMappingSubmit是Component中的一个函数。在构造函数中，只需添加：

constructor(props) {
    super(props)

    this.handleMappingSubmit = this.handleMappingSubmit.bind(this);
}

如果该功能位于不同的文件中。你像这样绑定它：

import { handleMappingSubmit } from './path/more-path';

// ...

constructor(props) {
    super(props)

    this.handleMappingSubmit = handleMappingSubmit.bind(this);
}

处理单击渲染外部（）

2 个答案: