用参数反应(组件)onClick方法

时间:2017-05-04 14:45:49

标签: javascript reactjs

我有将参数放入函数的问题。我已经尝试了一些我在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”

3 个答案:

答案 0 :(得分:1)

你有两个问题;

  1. 您在“地图”中使用“this” - 请参阅"this" is undefined inside map function Reactjs

  2. 你在每一行上执行this.showBtn,你想要的是将一个函数作为参数传递 - 这应该足够了:

    onClick = {()=&gt; this.showBtn(u.pos)}

答案 1 :(得分:0)

首先,您收到错误...

  

未捕获的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)}

答案 2 :(得分:0)

(代表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>
                                );
                            })