Question

我有将参数放入函数的问题。我已经尝试了一些我在Stack Overflow上找到的解决方案，但没有成功。

这是我的代码：

function mapStateToProps(store) { return { un: store.measurement.unsaved, pat: store.patient.patients }; }

class MeasUnsaved extends Component{
    constructor(){
        super();
        this.showBtn = this.showBtn.bind(this);
        this.findPat = this.findPat.bind(this); this.createObj = this.createObj.bind(this);}
    findPat(id){
        let ps = this.props.pat.filter( p => (p.id === id) );
        return ps[0];
    }
    createObj(){
        let meas = [], i=0;
        this.props.un.forEach( u => {
            let pat = this.findPat(u.patId);
            let k = { date: u.date, fnote: u.fnote, patId: u.patId, name: pat.lastName+' '+pat.name, pos: i };
            i++;
            meas.push(k);
        });
        return meas;
    }
    showBtn(val){
        console.log(val);
    }
    render(){
        const unsaved = this.createObj();
        return (
            <Well>
                <fieldset>
                    <legend>Unsaved Measurement</legend>
                    <p>Unsaved Meas. will be lost after logout.</p>
                    {this.props.un.length === 0 && <p> You have 0 unsaved measurement </p>}
                    {this.props.un.length > 0 &&
                    <Table responsive>
                        <thead>
                            <tr><th>Date</th><th>Note</th><th>Patient</th><th>Actions</th></tr>
                        </thead>
                        <tbody>
                        {
                            unsaved.map(function(u){
                                return (
                                    <tr key={u.date+u.patId.toString()}>
                                        <td>{u.date}</td>
                                        <td>{u.fnote}</td>
                                        <td>{u.name}</td>
                                        <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
                                    </tr>
                                );
                            })
                        }
                        </tbody>
                    </Table>
                    }
                </fieldset>
            </Well>
        );
    }
} export default connect(mapStateToProps)(MeasUnsaved) ;

这是错误：

错误：未捕获未捕获的TypeError：无法在onClick上读取未定义的属性“showBtn”

Answer 1

你有两个问题;

您在“地图”中使用“this” - 请参阅"this" is undefined inside map function Reactjs
你在每一行上执行this.showBtn，你想要的是将一个函数作为参数传递 - 这应该足够了：

onClick = {（）=＆gt; this.showBtn（u.pos）}

Answer 2

首先，您收到错误...

未捕获的TypeError：无法读取属性＆＃39; showBtn＆＃39;未定义的

...在你正在访问的行this.showBtn。在那一行，this is undefined because it's inside an anonymous function。

如果将该函数绑定到this，它将不再是未定义的：

unsaved.map(function (u) {
    return (
        <tr key={u.date+u.patId.toString()}>
            <td>{u.date}</td>
            <td>{u.fnote}</td>
            <td>{u.name}</td>
            <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
        </tr>
    );
}.bind(this))

或者，您可以使用arrow function：

unsaved.map((u) =>
    <tr key={u.date+u.patId.toString()}>
        <td>{u.date}</td>
        <td>{u.fnote}</td>
        <td>{u.name}</td>
        <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
    </tr>
})

其次，要使代码正常工作，您需要在onClick{}中传递一个函数，但您正在执行onClick={this.showBtn(e.pos)}。这样做会立即调用this.showBtn(e.pos)并将返回值（未定义）传递给onClick={}。

相反，这样做......

onClick={this.showBtn.bind(this, u.pos)}

......或者这个（使用箭头功能）......

onClick={() => this.showBtn(u.pos)}

Answer 3

（代表OP发布）。

解决方案：

unsaved.map((u)=>{
                                return (
                                    <tr key={u.date+u.patId.toString()}>
                                        <td>{u.date}</td>
                                        <td>{u.fnote}</td>
                                        <td>{u.name}</td>
                                        <td><Button bsSize="small" onClick={(event) => this.showBtn(u.pos)}>Show</Button></td>
                                    </tr>
                                );
                            })

用参数反应（组件）onClick方法

3 个答案: